调整DIV元素的宽度和高度。

Question

我有一个页面，在页面的左侧有一个垂直导航栏，右侧是“内容”区域。我想让“内容”区域的宽度填满屏幕剩余空间，高度与导航栏高度相同。

目前我已经有了以下代码：jsFiddle 最好能够找到一个纯 CSS 的解决方案。

- dstrachan

---

导航栏高度是否总是大于内容？ - Wex

我希望导航栏的高度是内容的最小高度，因此如果内容更大，div 将会伸展以适应。 - dstrachan

你想要额外的导航栏高度如何填充？只是用一个空白、深灰色、圆角矩形背景吗？换句话说，链接下面的空白区域可以接受，但你希望随着内容增加，那个矩形能够向下延伸。 - Patrick M

@PatrickM 导航栏不需要增长，下方的空白是可以的，只有内容区域需要随内容的更改而增/缩。但是如果内容比导航栏长度短，我希望内容区域的高度与导航栏相同。希望这样说得清楚。 - dstrachan

min-height CSS 属性可以完成工作，但每次添加另一个链接时都必须更改 CSS。我会再找一些自动缩放的解决方案。 - Patrick M

Answer 1

通常，假列技术用于填充未被内容填满的空间。您需要将CSS渐变替换为图像，并且使用固定尺寸更容易设置（但仍然可以使用流体尺寸）。

基本上，您需要按照以下方式构建HTML元素：

<div id="header"></div>
<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

就拉伸内容而言，您的CSS会为您完成工作：

/* The top part of the rounded container */
#header { 
    background: url(images/bg_top.gif) 100% 100% no-repeat; /* sit on top */
}

/* The background for your content */
#wrapper { 
    background: url(images/bg_tile.gif) 100% 0 repeat-y; /* repeat on the right */
}

/* The bottom of your content */
#footer {
    background: url(images/bg_bottom.gif) 100% 0 no-repeat; /* sit on the bottom */
}

你肯定需要调整一些负边距来让元素完美的排列。

- Wex

---

这是针对你的“纯CSS解决方案”。使用JavaScript会更好。 - Wex

Answer 2

为您的内容区域应用最小高度：

#content {
  position: absolute;
  margin-left: 200px;
  width: 100%;
  min-height:328px;
}

请查看更新的代码片段：http://jsfiddle.net/hsGN6/6/

虽然有点粗糙，但它能正常工作。

- ultraloveninja

---

我正在寻找比在min-height中硬编码更灵活的解决方案。随着导航栏的增长，我将不得不修改您的解决方案中的min-height值。 - dstrachan