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/

这很粗糙，但确实有效。

调整DIV元素的宽度和高度

2 个答案: