具有标准页眉页脚布局的HTML页面，而不使用表格标记 [英] HTML page with a standard header footer layout without using table tag
问题描述
>
如何我得到什么显示在图像中，而不使用表？我想要布局跨越页面的整个高度/宽度，即使浏览器窗口调整大小。
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>
非常感谢一个干净简单的css。
A clean and simple css would be greatly appreciated.
推荐答案
Foo，你需要做的是在HTML和CSS之前尝试这个。理想情况下，您希望避免内联样式（例如 style =border：1px solid black;）。你不需要固定或绝对定位来完成这一点。它完全可以使用基本的HTML / CSS技术。这里是您要求的替代解决方案：
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:
<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>
和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: "\0020";
display: block;
overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
这里是 demo 。采取这个演示，并从中学习！希望这有助于！
Here is a demo. Take this demo and learn from it! Hope this helps!
这篇关于具有标准页眉页脚布局的HTML页面，而不使用表格标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
