Question

我有一个由3个DIV组成的简单网页。我需要一个可以执行以下操作的下降CSS样式：

顶部和底部div必须具有固定的最小宽度（例如20 px，如果不可能，则降至0 px）。

中间div应具有固定宽度，例如1000 x 700 px。

当我为每个div设置固定的宽度/高度时，一切都很好，除了屏幕没有拉伸。如果我将顶部和底部divs高度设置为auto，我将第二个（固定大小）div连接到屏幕的顶部，顶部div大小为0，底部尺寸di也是奇怪的大小。

包含所有CSS属性的HTML代码：

<body style="background-color:#030303; margin:0px; padding:0px;">
<!--head-->
<div style="margin:0 auto; width:100%; height:auto; border:0px solid red; background-color:#181818; position:relative;">
 (some images)
</div>
<!--gallery-->
<div id="galleria" style="height:700px;width:1000px; margin:0 auto; border:1px solid green;   ">
    <a href="img/img1.jpg"><img src="img/thumb1.jpg" data-title="My title" data-description="My description"></a>
    <a href="img/img2.jpg"><img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>
<!--footer-->
<div style="  margin:0 auto; top:0px; width:100%; height:auto; position:relative; border:1px solid red; line-height:128px; background-color:#181818">
    <div align="center" >
     (some images)
     </div>

</div>
</body>

Answer 1

首先让我们从HTML中获取样式并使其成为正确的CSS格式。接下来，我将HTML拆分为一个简单的表单，以便您可以更好地帮助定义问题：

http://jsfiddle.net/HF6Cc/

<强> HTML：

<body>

<!--head-->
<div class="head">header</div>

<!--gallery-->
<div id="galleria" class="middle">
    <a href="img/img1.jpg"><img src="img/thumb1.jpg" data-title="My title" data-description="My description"></a>
    <a href="img/img2.jpg"><img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a>
</div>

<!--footer-->
<div class="footer">footer</div>

</body>

CSS

body { width:1000px; margin:0; padding:0; }

.head { margin:0 auto; background-color:orange; }

.middle { margin:0 auto; background-color:lime; }

.footer { margin:0 auto; background-color:yellow; }

现在，你到底想要做什么呢？

Answer 2

你的问题有点令人困惑（当你说宽度时，你的意思是身高吗？）。如果我理解正确，您希望三个div加起来视口的总高度。我知道有两种方法可以做到这一点 - 绝对定位或显示：表格样式。根据我的经验，第一个更有效率。

<div id="topbar">Top</div>
<div id="mainarea">Middle</div>
<div id="footbar">Botton</div>

#topbar, #mainarea, #footbar { position: absolute; overflow: auto; }
#topbar { height: 20px; top: 0; left: 0; right: 0; }
#mainarea { top: 20px; left: 0; right: 0; bottom: 20px; }
#footbar { height: 20px; left: 0; right: 0; bottom: 0; }

如果你想要实际分配一个宽度，那么摆脱'正确'的样式并为所有三个分配相同的宽度（尽管强迫人们使用宽度通常是不明智的。）

堆栈3 DIV使用CSS填充屏幕，中间DIV具有固定高度

2 个答案: