调整DIV元素的宽度和高度

Question

我有一个页面，页面左侧有一个垂直导航栏，导航栏右侧有一个“内容”区域。我希望“内容”区域的宽度填满屏幕的其余部分，高度与导航栏的高度相匹配。

这就是我到目前为止所拥有的：jsFiddle

最好是我正在寻找一个纯CSS的解决方案来解决这个问题。

Answer 1

通常，Faux Columns技术用于填充未填充内容的空间。你需要用图片替换你的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 */
}

你肯定需要玩弄一些负的边际，才能让事情变得完美。

Answer 2

对内容区域应用最小高度：

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

查看更新后的小提琴：http://jsfiddle.net/hsGN6/6/

这是粗糙的，但它是有效的。