圣杯模型

前提：

三栏模式，左右固定之间auto

最终实现的效果

html代码：

<body>
	<div id="header" style="background-color: red;">header</div>
	<div id="container">
		<div id="center" class="column" style="background-color: blue;">
			center
			<br/>
			center
			<br/>
			center
			<br/>
			center
			<br/>
			center
			<br/>
			center
			<br/>
			center
			<br/>
			center
			<br/>
			center
			<br/>
		</div>
		<div id="left" class="column" style="background-color: gray;">left</div>
		<div id="right" class="column" style="background-color: green;">right</div>
	</div>
	<div id="footer" style="background-color: pink;">footer</div>
</body>

css代码

<style type="text/css">
		body {
		  min-width: 550px;      /* 2x LC width + RC width */
		}
		#container {
		  padding-left: 200px;   /* LC width */
		  padding-right: 200px;  /* RC width */
		  overflow:hidden;
		}
		#container .column {
		  position: relative;
		  float: left;
		  /* 如何进行等高设置 */
		  padding-bottom: 20010px;  /* X + padding-bottom */
		  margin-bottom: -20000px;  /* X */
		}
		#center {
		  width: 100%;
		}
		#left {
		  width: 200px;          /* LC width */
		  right: 200px;          /* LC width */
		  margin-left: -100%;
		}
		#right {
		  width: 200px;          /* RC width */
		  margin-right: -200px;  /* RC width */
		}
		#footer {
		  clear: both;
		}
		/*** IE6 Fix ***/
		* html #left {
		  left: 150px;           /* RC width */
		}
	</style>

其中有一段有关实现两侧和中间伪等高的设置，这里面设置了足够长的像素长度为的就是实现任何一边长度发生变化，其他两边的都可以随之撑开

/* 如何进行等高设置 */
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */

本文参考地址：https://alistapart.com/article/holygrail

欢迎访问交流群：589780530
博主交流：2718272293
邮箱：[email protected] [email protected]
github: https://github.com/licunzhi

猜你喜欢