圣杯布局中几个问题？求教
学习圣杯布局中，参考
这篇文章
，大概布局实现了，但是还是有几点看不懂为什么要那样做，
原文中
也解释了，可是英文，额，菜。。
下面是我的布局代码，请教大家几个问题？
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>圣杯布局测试</title>
<style type="text/css">
body {
min-width: 630px;
margin: 0;
padding: 0;
}
#container {
padding-left: 200px;
padding-right: 190px;
overflow: hidden;
}
#container .column {
position: relative;
float: left;
text-align: justify;
/*下面这两行代码的作用是把三栏底部对齐？可是为什么要这样写，哪里来的20010px? 我把他们换成10010样子也是一样的，但是原文中为什么设置为20010px?*/
padding-bottom: 20010px;
margin-bottom: -20000px;
}
#center {
width: 100%;
padding: 10px 20px;
background-color: #DDDDDD;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
background-color: #6666FF;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -190px;
background-color: #FF6666;
}
#header, #footer {
height: 80px;
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #999999;
}
#footer {
position: relative;
/*貌似不需要clear:both也可以。？*/
clear: both;
}
* html #footer-wrapper {
/*最不明白的是下面的代码，为什么要把footer再加一层div??
还有下面的padding-bottom,margin-bottom我注释掉页面也没影响，这两段代码作用是什么？*/
float: left;
position: relative;
width:100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background-color: #fff;
}
/*IE6 fix*/
* html #left {
left: 150px;
}
</style>
<body>
<div id="page">
<div id="header"> This is the Header</div>
<div id="container">
<div id="center" class="column"> Main content </div>
<div id="left" class="column"> left sidebar left sidebarleft sidebarleft sidebarleft sidebarleft left sidebar left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar left sidebarleft sidebarleft sidebarleft sidebarleftsidebar</div>
<div id="right" class="column"> right sidebar right sidebarright sidebarright sidebarright sidebarright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright right sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightsidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarright </div>
</div>
<div id="footer-wrapper">
<div id="footer"> This is the footer </div>
</div>
</div>
</body>
</html>
求教各位解释下，谢谢。 :)
Cosmo
9 years, 10 months ago
Answers
回答在注释里哦~
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>圣杯布局测试</title>
<style type="text/css">
body {
min-width: 630px;
margin: 0;
padding: 0;
}
#container {
padding-left: 200px;
padding-right: 190px;
overflow: hidden;
}
#container .column {
position: relative;
float: left;
text-align: justify;
/*下面这两行代码的作用是把三栏底部对齐？可是为什么要这样写，哪里来的20010px? 我把他们换成10010样子也是一样的，但是原文中为什么设置为20010px?*/
/* 1.这两行代码的作用是：让这三栏自动等高。原理可以查下“负边距”
2.至于20010px你也说了改成10010px也可以，其实这个高度只要大于这三栏可能的最大高度就可以。设成20010是为了足够大，不用担心内容高度太大结果“变形”的问题
*/
padding-bottom: 20010px;
margin-bottom: -20000px;
}
#center {
width: 100%;
padding: 10px 20px;
background-color: #DDDDDD;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
background-color: #6666FF;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -190px;
background-color: #FF6666;
}
#header, #footer {
height: 80px;
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #999999;
}
#footer {
position: relative;
/*貌似不需要clear:both也可以。？*/
/* 确实不需要clear:both，因为#container里有这样一句话“ overflow:hidden ”，这句话让#container形成了BFC，BFC里面的浮动对外面不会产生影响。
*/
clear: both;
}
* html #footer-wrapper { /* 去*才起作用，不过一般不都是直接 #footer-wrapper 么 */
/*最不明白的是下面的代码，为什么要把footer再加一层div??
还有下面的padding-bottom,margin-bottom我注释掉页面也没影响，这两段代码作用是什么？*/
/* footer再加一层是因为一般的footer都不是一列而是几列布局，外面加个框把这些框起来，代码结构更清晰，同时也可能有其他作用。比如 padding-bottom: 10010px; margin-bottom: -10000px; 还是之前说的，为了让几列等高，但是这个栗子中，footer-wrapper里面只有footer一个元素，所以加不加没所谓。
你说你注释这两行没影响，那是因为选择器不对。
*/
float: left;
position: relative;
width:100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background-color: #fff;
}
/*IE6 fix*/
* html #left {
left: 150px;
}
</style>
<body>
<div id="page">
<div id="header"> This is the Header</div>
<div id="container">
<div id="center" class="column"> Main content </div>
<div id="left" class="column"> left sidebar left sidebarleft sidebarleft sidebarleft sidebarleft left sidebar left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar left sidebarleft sidebarleft sidebarleft sidebarleftleft sidebar left sidebarleft sidebarleft sidebarleft sidebarleftsidebar</div>
<div id="right" class="column"> right sidebar right sidebarright sidebarright sidebarright sidebarright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright right sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightsidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarrightright sidebar right sidebarright sidebarright </div>
</div>
<div id="footer-wrapper">
<div id="footer"> This is the footer </div>
</div>
</div>
</body>
</html>
麻薯基列莱特
answered 9 years, 10 months ago