HTML CSS DIVs 排列答案

【问题标题】：HTML CSS DIVs arrangementHTML CSS DIVs 排列
【发布时间】：2012-09-30 19:27:15
【问题描述】：

大家好。我需要帮助来安排我网站的 div。我的网站有 3 个主要的 DIV。 1. DIV1 - 我的页眉（固定高度） 2. DIV2 - 动态内容区域，因此高度不同 3. DIV3 - 我的页脚（固定高度）

所有 DIV 的宽度均为 100%。

DIV1 标头相对于浏览器顶部的距离必须为 0px。我希望 3 个 DIV 必须彼此重叠，如图所示。如果用户的分辨率高于我的 3 个 DIV，则 DIV 之后最底部的内容只是空白。但是，我似乎无法使该布局正常工作。 DIV3 页脚一直给我带来麻烦。

我有以下 CSS 代码：

div1 {
  position: fixed;
  top: 0px;
}
div2 {
  position: relative;
  top: 0px;
}
div3 {
  position: fixed;
  top: 0px;
}

如果我对 DIV3 使用position: fixed，而我的 DIV2 的内容较短，整个网站会看起来很奇怪。如果我尝试更改为 position: relative for DIV3，DIV3 将重叠并出现在 DIV1 的前面。

有没有更好的建议？非常感谢。

【问题讨论】：

如果你想学习定位请查看barelyfitz.com/screencast/html-training/css/positioning不错的东西
问题是您正在制作divs 1 和3 fixed，然后将它们定位在屏幕顶部，以便一个在另一个之上。鉴于您显示的 CSS，div 3 将位于 div 1 之上。

标签： css html

【解决方案1】：

您使用定位来布局 div 有什么原因吗？

Div 会自然堆叠在一起，无需定位。

【讨论】：

【解决方案2】：

我认为您需要固定页眉和页脚的位置。

http://www.cssplay.co.uk/layouts/basics2.html

【讨论】：

【解决方案3】：

HTML

<div class="div1">header</div>
<div class="div2">Content area</div>
<div class="div3">Footer</div>

CSS

.div1 {
height:100px; background:red; width:100%
}
.div2 {
position: relative;
top: 0px; background:green; width:100%; height:100px;
}
.div3 {
 background:blue; width:100%; height:100px;
}

演示http://jsfiddle.net/K3Unz/2/

【讨论】：

【解决方案4】：

希望对你有帮助
如果您想在底部修复此问题，请使用页脚 bottom: 0px;

这里是演示：fiddle

body{
background:green;
}

div.one {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background: #4f4f4f;
}
div.two {
height: 100%;
width: 100%;
margin-top: 50px;
}
 div.three {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
 }

【讨论】：

【解决方案5】：

检查这个：CSS layout generator.

编辑：
检查this fiddle

尝试使用：

.head{
  position:fixed;
  top:0px;
}
.footer{
  position:fixed; 
  bottom:0px;
}

【讨论】：

【解决方案6】：

在风格上，我为 div1,div2,div3 = 100px 设置了相同的高度：

<style>
body
{
    margin: 0 auto;
}
#div1 {
    height: 100px;
    width:100%;
    top: 0px;
    background-color:#F00;
}
#div2 {
    height: 100px;
    width:100%;
    top: 0px;
    background-color:#00F;
}
#div3 {
    height: 100px;
    width:100%;
    top: 0px;
    background-color:#FF0;
}
</style>

在html标签中：

<body>
    <div id="div1">Header</div>
    <div id="div2">Cotent</div>
    <div id="div3">Footer</div>
</body>

我希望这能满足您的要求，

【讨论】：