其他 · 要努力

<div id="div6"> <h2> 6，上中下布局，上下固定，中间自适应 </h2></div> #### 6-1 方法一：绝对定位实现这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条； ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头尾固定高度，中间自适应@Cookie_fzx@绝对定位实现</title> <style type="text/css"> html,body,div{padding:0; margin:0;} .header{ position:absolute; top:0; /*头部绝对定位位置*/ height:100px; width:100%; background: red; font-size: 50px; } .footer{ position:absolute; bottom:0;/*尾部绝对定位位置*/ height:100px; width:100%; background:yellow; font-size: 50px; } .center{ position:absolute; width:100%; background: #ccc; font-size: 50px; top:100px; /*中间自适应部分绝对定位位置，top是头部的高度*/ bottom:100px; /*bottom是尾部的高度*/ overflow:auto; /*超出的部分，滚动条显示*/ } </style> </head> <body> <div class="container"> <div class="header">我是头部</div> <div class="center"> 我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br>我是中间自适应<br> </div> <div class="footer">我是尾部</div> </div> </body> </html> ``` #### 6-2 方法2：flex布局实现 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200111232951481.gif) - 1， body：页面高度100%； - 2，父元素容器： display为flex，高度100%，且将flex-direction设置为column，定义排列方向为竖排 - 3，中间： flex:1; 且 overflow:auto; ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>@cookie_fzx&&flex布局实现</title> <style type="text/css"> html,body{ padding:0; margin:0; height:100%; /*定义页面整体高度为100%，重要*/ } .container{ height:100%; /*这里也要定义，重要*/ width:100%; display:flex; /*父元素的定义为flex布局*/ flex-direction: column; /*定义排列方向为竖排*/ } .header{ height:100px; /*头部固定高度*/ background: red; font-size: 60px;} .footer{ height:100px; /*尾部固定高度*/ background: yellow; font-size: 60px;} .center{ background: #ccc; font-size: 60px; flex:1; /*中间分配剩下的所有空间*/ overflow:auto; } </style> </head> <body> <div class="container"> <div class="header">我是头部</div> <div class="center"> 我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br>我是flex布局实现的中间自适应<br> </div> <div class="footer">我是尾部</div> </div> </body> </html> ``` <div id="div7"> <h2> 左右固定，中间自适应，且先加载中间块 </h2></div> id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高， **把类选择器center写在后面** - ==方法1：绝对定位== 将左右两边使用absolute定位，左left为0，右right为0; ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右布局中间自适应@cookie_fzx</title> <style> html,body{ margin: 0px;width: 100%; } #left,#right{width: 200px;height: 200px;background-color: pink; position: absolute;} #left{left: 0;top:0;} #right{right: 0;top:0;} /*类选择器center写在后面*/ #center{background-color: lightgreen; height: 200px;} </style> </head> <body> <div id="left">我是左边</div> <div id="center">我是中间</div> <div id="right">我是右边</div> </body> </html> ``` - ==方法2：浮动== 左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间：margin: 0 200px; - ==方法3：浮动+绝对定位== 左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间： left和right空出200px，且绝对定位 - ==方法4： flex 弹性布局== 在外围包裹一层父元素div，设置为display：flex；中间设置flex：1；圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现。而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。