• 一个div(id是outer)中,里边有两个div(id分别是top和bottom),一个高度是100px,希望另一个元素撑满剩下的区域


    方法一,利用flex

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style>
     7             *{
     8                 margin: 0;
     9                 padding: 0;
    10             }
    11             
    12             .outer{
    13                 height: 500px;
    14                 width: 500px;
    15                 border: 2px red solid;
    16                 display: flex;
    17                 flex-direction: column;
    18             }
    19             
    20             .top{
    21                 height: 100px;
    22                 width: 100%;
    23                 background-color: black;
    24                 /* 没有生长素 */
    25                 flex: none;
    26             }
    27             
    28             .bottom{
    29                 width: 100%;
    30                 background-color: #0000FF;
    31                 flex: auto;
    32             }
    33             
    34         </style>
    35         
    36     </head>
    37     <body>
    38         <div class="outer">
    39             <div class="top"></div>
    40             <div class="bottom"></div>
    41         </div>
    42     </body>
    43 </html>

    二,利用定位

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style>
     7             *{
     8                 margin: 0;
     9                 padding: 0;
    10             }
    11             
    12             .outer{
    13                 height: 500px;
    14                 width: 500px;
    15                 border: 2px red solid;
    16                 position: relative;
    17             }
    18             
    19             .top{
    20                 height: 100px;
    21                 width: 100%;
    22                 background-color: black;
    23                 
    24             }
    25             
    26             .bottom{
    27                 width: 100%;
    28                 background-color: #0000FF;
    29                 position: absolute;
    30                 top: 100px;
    31                 left: 0;
    32                 right: 0;
    33                 bottom: 0;
    34                 
    35             }
    36             
    37         </style>
    38         
    39     </head>
    40     <body>
    41         <div class="outer">
    42             <div class="top"></div>
    43             <div class="bottom"></div>
    44         </div>
    45     </body>
    46 </html>
  • 相关阅读:
    Android Training
    Android Training
    简述Activity与Window关系
    简述Activity生命周期
    Python基础之元组及range
    python基础数据类型之列表
    python之字符串
    python基础之int整型
    python基础知识之格式化
    Python基础知识初识 (二)
  • 原文地址:https://www.cnblogs.com/fsg6/p/12723514.html
Copyright © 2020-2023  润新知