实现效果
实现方法
整体布局由header、footer、content三部分组成,由绝对定位实现(position:absolute),header和footer部分设置高,中间部分自适应高度。其中content又分成left、right、middle三部分,由Flex布局实现,左右两边设置宽度,中间内容自适应宽度。
代码
HTML部分
<div class="container">
<!--头部-->
<div class="header"></div>
<!--内容部分-->
<div class="content">
<div class="content-left"></div>
<div class="content-middle"></div>
<div class="content-right"></div>
</div>
<!--底部-->
<div class="footer"></div>
</div>
CSS部分
body{
margin: 0;
padding: 0;
font-size: 30px;
}
.container {
width: 100%;
min-height: 100%px;
background-color: lightsalmon;
}
.header {
height: 68px;
width: 100%;
position: absolute;
background-color: lightsalmon;
}
.content {
display: flex;
display: -webkit-flex;
/*纵向排列*/
/* flex-direction: column; */
width: 100%;
background-color:lightgreen;
position: absolute;
top:68px;
bottom:68px;
overflow: auto; /*超出的部分,滚动条显示*/
}
.content-left {
background-color: aquamarine;
width: 320px;
/* 不放大 不缩小 固定宽度320px */
flex: 0 0 320px;
<!--高度为父元素的100%-->
height: 100%;
}
.content-middle {
background-color: yellow;
width: 320px;
height: 100%;
<!--可放大 可缩小,自适应宽度-->
flex: 1 1 auto;
}
.content-right {
background-color: aquamarine;
width: 320px;
height: 100%;
text-align: center;
/* 不放大 不缩小 固定宽度320px */
flex: 0 0 320px;
}
.footer {
width: 100%;
height: 68px;
position: absolute;
<!--紧贴底部-->
bottom: 0;
background-color: lightsalmon;
}
补充知识
flex的属性取值
flex不写时,属性默认是0 1 auto,即
- flex-grow为0,存在剩余空间也不放大
- flex-shrink为1,空间不足该项目缩小
- flex-basis为auto,该项目本来的大小
flex:1 1 1 auto;
- flex-grow为1,存在剩余空间时放大
- flex-shrink为1,空间不足该项目缩小
- flex-basis为auto,自适应剩余的空间
原文地址:https://blog.csdn.net/DZY_12/article/details/101420922
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。