一个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>

 

posted @ 2020-04-18 00:00  全情海洋  阅读(321)  评论(0)  编辑  收藏  举报