一、flex布局
-
顶部，底部固定，中间自适应(中间左固定，右自适应)。
<body> <div class="container"> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </div> </body> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .container { height: 100%; background-color: yellow; display: flex; flex-direction: column; } .header { height: 80px; background-color: red; } .content { flex: 1; display: flex; background-color: green; } .left { width: 200px; background-color: hotpink; } .right { flex: 1; background-color: yellow; } .footer { height: 80px; background-color: blue; } </style>
-
三栏平均分布局（两边可以定框）
<body> <div class="container"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> </body> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .container { height: 100%; background-color: yellow; display: flex; } .left { flex: 1; background-color: red; } .middle { flex: 1; background-color: green; } .right { flex: 1; background-color: blue; } </style>
二、float + margin
-
两栏布局
宽高实际需要，不设置高度，通过子元素自动撑起。
<body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .container { height: 100%; background-color: yellow; } .left { float: left; width: 200px; height: 100%; background-color: red; } .right { margin-left: 200px; height: 100%; background-color: green; } .container::after{ content: ''; display: block; clear: both; } </style>
/* 不需要清除浮动也可以 */
-
两边固定中间自适应
<body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </div> </body> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .container { height: 100%; background-color: yellow; } .left { float: left; width: 200px; height: 100%; background-color: red; } .right { float: right; width: 200px; height: 100%; background-color: green; } .middle { margin-left: 200px; margin-right: 200px; height: 100%; background-color: blue; } </style>
因为排在后面的浮动元素会把前面的块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以元素排序为：
<body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </div> </body>