圣杯布局中几个问题？求教
学习圣杯布局中，参考这篇文章，大概布局实现了，但是还是有几点看不懂为什么要那样做，原文中也解释了，可是英文，额，菜。。
下面是我的布局代码，请教大家几个问题？
<!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>
展开
收起
1
条回答
写回答
写回答
-
<!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>2019-07-17 19:18:13赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
