0

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

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

中间 div 应该是固定宽度，例如 1000 x 700 像素。

当我为每个 div 设置固定宽度/高度时，一切都很好，除了屏幕没有拉伸。如果我将顶部和底部 div 的高度设置为自动，我将第二个（固定大小）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>
4

2 回答 2

0

首先让我们从 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; }

现在，你到底想用这个布局做什么？

于 2013-01-02T19:10:39.483 回答
0

您的问题有点令人困惑（当您说宽度时，您是指高度吗？）。如果我理解正确，您希望三个 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; }

如果您也想实际分配宽度，那么摆脱“正确”样式并为所有三个分配相同的宽度（不过，通常不明智地对人强制宽度）。

于 2013-01-02T19:11:26.070 回答