具有标准页眉页脚布局的 HTML 页面，不使用表格标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15628259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML page with a standard header footer layout without using table tag
提问by Foo
How can I attain whats shown in the image without using tables? I want the layout to span the entire height/width of the page, even if the browser window is resized.
如何在不使用表格的情况下获得图像中显示的内容？我希望布局跨越页面的整个高度/宽度，即使浏览器窗口已调整大小。
This is what I have tried so far. Its close, but doesn't look professional.
这是我到目前为止所尝试的。它很接近，但看起来并不专业。
<html>
<body>
<div>
<div style="border-style: solid; height: 20%">
Header</div>
<div style="overflow: hidden; height: 55%">
<div style="border-style: solid; float: left; width: 20%; height: 100%;">
left</div>
<div style="border-style: solid; float: left; width: 57%; height: 100%;">
content</div>
<div style="border-style: solid; float: left; width: 20%; height: 100%;">
right</div>
</div>
<div style="border-style: solid; height: 20%">
Footer</div>
</div>
</body>
</html>
A clean and simple css would be greatly appreciated.
一个干净简单的 css 将不胜感激。
回答by djthoms
Foo, what you need to do is get a good foundation in HTML and CSS before attempting this. Ideally, you want to avoid inline styles (e.g. style="border: 1px solid black;"). You don't need fixed or absolute positioning to accomplish this. It's entirely doable with basic HTML/CSS know-how. Here is an alternative solution to what you're asking:
Foo，您需要做的是在尝试此之前在 HTML 和 CSS 方面打下良好的基础。理想情况下，您希望避免内联样式（例如style="border: 1px solid black;"）。您不需要固定或绝对定位来完成此操作。使用基本的 HTML/CSS 知识完全可以做到。这是您所要求的替代解决方案：
<div class="header">
<div class="header-inner"></div>
</div>
<div class="content">
<div class="sidebar left">
<div class="sidebar-inner"></div>
</div>
<div class="content-inner"></div>
<div class="sidebar right">
<div class="sidebar-inner"></div>
</div>
</div>
<div class="footer">
<div class="footer-inner"></div>
</div>
And the CSS:
和 CSS：
/* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
position: relative; /* needed for stacking */
height: 100px;
width: 100%;
}
.content {
position: relative; /* needed for stacking */
width: 100%;
height: 500px;
}
.sidebar {
position: relative; /* needed for stacking */
width: 20%;
height: 100%;
border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
clear: both;
content: " <div>
<div style="border-style: solid; height: 20%; position: fixed; top: 0px; width: 100%;">
Header
</div>
<div style="overflow: hidden; height: 55%">
<div style="border-style: solid; float: left; width: 20%; height: 60%; position: fixed; left: 0px; top: 20%;">
left
</div>
<div style="border-style: solid; float: left; width: 55%; height: 60%; position: fixed; top: 20%; left: 20%;">
content
</div>
<div style="border-style: solid; float: right; width: 20%; height: 60%; position: fixed; right: 0px; top: 20%;">
right
</div>
</div>
<div style="border-style: solid; height: 20%; position: fixed; bottom: 0px; width: 100%;">
Footer
</div>
</div>
20";
display: block;
overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
Here is a demo. Take this demo and learn from it! Hope this helps!
这是一个演示。拿这个演示并从中学习！希望这可以帮助！
回答by Muhammad Omar ElShourbagy
Use the position: fixed(ALL) along with top: 0px;(top div) , right: 0px;(right div),
left: 0px;(left div), bottom: 0px;(bottom div)
使用position: fixed(ALL) 和top: 0px;(top div) , right: 0px;(right div),
left: 0px;(left div), bottom: 0px;(bottom div)
Fixed Positions should help in your case
固定职位应该对您有所帮助
EDIT:here is the code working:
编辑：这是代码工作：
#header
{
position:fixed;
top:0px;
left:0px;
right:0px;
height:20%;
overflow:hidden;
}
#leftSide
{
position:fixed;
top:21%;
left:0px;
width:20%;
bottom:21%;
}
#rightSide
{
position:fixed;
top:21%;
right:0px;
width:20%;
bottom:21%;
}
#footer
{
position:fixed;
height:20%;
left:0px;
right:0px;
bottom:0px;
}
#content
{
position:fixed;
top:21%;
bottom:21%;
left:21%;
width:57%;
}
div {display:block; border:1px solid black;}
回答by nelek
css :
css :
<div id="header">header</div>
<div id="leftSide">left</div>
<div id="content">content</div>
<div id="rightSide">right</div>
<div id="footer">footer</div>
html :
html :
##代码##in this example I use fixedposition, but you can set overflow-xand overflow-yfor every of this div's.
for example: for contentyou can use overflow-x:hiddenand overflow-y:autoor scrolland so on for every div.
of course, page will not be scrollable in this example.
在本例中，我使用fixedposition，但您可以为每个 div设置overflow-x和overflow-y。例如：因为content您可以对每个 div使用overflow-x:hiddenandoverflow-y:auto或scroll等等。当然，在这个例子中页面是不可滚动的。
回答by armin
I guess you already figured out a solution by now, as the question is nearly two years old. However, some other people might stumble upon this post, so this is for future reference:
我想你现在已经想出了一个解决方案，因为这个问题已经有将近两年的历史了。然而，其他一些人可能会偶然发现这篇文章，所以这是为了将来参考：
Take a look at this answer and check the JSFiddles. It's a relatively solid solution using CSS tables (no HTML layout-tables).
看看这个答案并检查 JSFiddles。这是使用 CSS 表（没有 HTML 布局表）的相对可靠的解决方案。
