带有标准页眉页脚布局的HTML页面,不使用表格标签
如何在不使用表格的情况下获得图像中显示的内容？我希望布局跨越页面的整个高度/宽度,即使调整了浏览器窗口的大小.
这是我到目前为止所尝试的.它很近,但看起来并不专业.
<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将非常感激.
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>
而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;
}
这是一个演示.参加这个演示并从中学习!希望这可以帮助!
- 这不符合跨越页面整个高度的标准.你的高度硬编码为500px; (2认同)