html - 调整 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/

它很粗糙，但它有效。