CSS圣杯布局 [英] CSS Holy Grail layout
问题描述
有人可以为我分解构成圣杯布局的切换div定位的部分，如这里所示？ http://matthewjamestaylor.com/blog/perfect-3-column.htm
我的理解方式是：
-
colmask是
-
colleft是真实东西的包装器（不知道为什么这么多包装器）
-
col1，col2和col3
有人可以更好地解释这个设计的禅宗是什么？
我想出了这个布局后，沮丧的所有建议在那里。它的HTML5 / CSS3兼容和工作在IE8 +和atleast FF21 - 我没有在其他版本和浏览器测试。但如果你寻找一个流畅的布局 - 这一个工作伟大。
<！DOCTYPE html>
< html>
< head>
< title> Canvas< / title>
< style type =text / css>
* {padding：0px; margin：0px;}
html，body {width：100％; height：100％;}
#page {width：100％; height：100％; position：relative;}
#page> #header {
position：absolute;
top：0px;
left：0px;
right：0px;
height：64px;
background：#ccc;
}
#page> #body {
position：absolute;
top：64px;
left：0px;
right：0px;
bottom：64px;
}
#page> #body> #left {
position：absolute;
top：0px;
left：0px;
bottom：0px;
width：192px;
background：#bbb;
}
#page> #body> #center {
position：absolute;
top：0px;
left：192px;
right：192px;
bottom：0px;
}
#page> #body> #right {
position：absolute;
top：0px;
right：0px;
bottom：0px;
width：192px;
background：#bbb;
}
#page> #footer {
position：absolute;
bottom：0px;
right：0px;
left：0px;
height：64px;
background：#ccc;
}
< / style>
< / head>
< body>
< div id =page>
< div id =header>< / div>
< div id =body>
< div id =left>< / div>
< div id =center>< / div>
< div id =right>< / div>
< / div>
< div id =footer>< / div>
< / div>
< / body>
< / html>
Can someone break down for me the pieces that compose the Holy Grail Layout with switched div positioning as seen here? http://matthewjamestaylor.com/blog/perfect-3-column.htm
The way I understand is that:
colmask is just a wrapper to position the content between header and footer
colmid is another wrapper that i guess accomodates some browsers such as IE7
colleft is the wrapper of the real thing (not sure why so many wrappers)
col1, col2 and col3 are the real thing and are all floating left and set their margins to adjust their appearance on the screen
Can someone explain better what's the Zen of that design? I'm trying to apply it to a real world scenario and it's not really working.
I came up with this layout after getting frustrated with all the suggestions out there. Its HTML5/CSS3 complient and works in IE8+ and atleast FF21 - I haven't tested in other versions and browsers. But if your looking for a fluid layout - this one works great.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css">
* {padding:0px; margin:0px;}
html, body {width:100%; height:100%;}
#page {width:100%; height:100%;position:relative;}
#page > #header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:64px;
background:#ccc;
}
#page > #body {
position:absolute;
top:64px;
left:0px;
right:0px;
bottom:64px;
}
#page > #body > #left {
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:192px;
background:#bbb;
}
#page > #body > #center {
position:absolute;
top:0px;
left:192px;
right:192px;
bottom:0px;
}
#page > #body > #right {
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:192px;
background:#bbb;
}
#page > #footer {
position:absolute;
bottom:0px;
right:0px;
left:0px;
height:64px;
background:#ccc;
}
</style>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="body">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
这篇关于CSS圣杯布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
