Question

Mock website design

大家好。我需要帮助安排我网站的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;
}

如果我将position: fixed用于DIV3，而我的DIV2内容较短，则整个网站看起来都很奇怪。如果我尝试更改为位置：相对于DIV3，DIV3将重叠并显示在DIV1前面。

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

Answer 1

请检查：CSS layout generator.

修改
查看this fiddle

尝试使用：

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

Answer 2

你有没有理由使用定位来布局div？

Div's会自然地叠加在一起而不需要定位。

Answer 3

我认为您需要修复页眉和页脚的定位。

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

Answer 4

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/

Answer 5

我希望这可能对你有所帮助如果要在底部

中修复此页脚，请使用页脚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;
 }

Answer 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>

我希望这符合您的要求，

HTML CSS DIV安排

6 个答案: