1

模拟网站设计

大家好。我需要帮助来安排我网站的 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: fixedDIV3，而我的 DIV2 的内容较短，整个网站会看起来很奇怪。如果我尝试更改为 position: relative for DIV3，DIV3 将重叠并出现在 DIV1 的前面。

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

4

6 回答 6

0

我希望这可能对您
使用页脚有所帮助，就bottom: 0px;好像您想将其固定在底部一样

这里的演示：小提琴

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;
 }
于 2012-10-10T10:57:06.313 回答
0

检查这个：CSS 布局生成器。

编辑：
检查这个小提琴

尝试使用：

.head{
  position:fixed;
  top:0px;
}
.footer{
  position:fixed; 
  bottom:0px;
}
于 2012-10-10T10:45:57.083 回答
0

你有什么理由使用定位来布局 div 吗？

Div 将自然堆叠在一起，无需任何定位。

于 2012-10-10T10:47:19.727 回答
0

在风格上，我为 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>

我希望这将符合您的要求，

于 2012-10-10T11:04:38.757 回答
0

我认为你想要固定的页眉和页脚定位。

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

于 2012-10-10T10:49:37.090 回答
0

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/

于 2012-10-10T10:51:49.513 回答