2 
+----------------------+
|          1           |
|                      |
+----------------------+
|       |              |
|   2   |              |
|       |              |
|       |      4       |
+-------|              |
|    3  |              |
|       |              |
+----------------------+

如上图（1）我需要添加一些标题内容，（2）左侧导航，（3）2内的一些内容到3的中心但不知道高度，因为4，（4）更大的内容。因此，我需要指定height: 100%;但不起作用。怎么做？

编辑

<div id="wrap">
<!--contents of (1)--> 
</div>
<div id="wrap">
<div id="left-nav">
<!--contents of (2)-->
<div id="someid">
<!-contents of (3)-->
</div>
</div>
<div id="main">
<!--contents of (4)-->
</div>
</div>

我想使用背景（2）和（3）相同的主css，（4）不同的背景。

#left-nav{width: 200px; background-color: red; height: 100%;}

检查此链接带有红色边框的红色文本是我想要给出的height: 100%;

4

4 回答 4

1

很高兴看到完整的问题:)

演示：JSFiddle

当您有动态内容并且您不知道页面的高度时，您不应该设置该height属性，因为高度将相对于父（或窗口）的高度进行设置。同样，我们希望大小是动态的！所以不要设置 height 属性。

我认为这个问题可以改写为：

问：如何仅使用 CSS使动态区域具有相同的高度？

简单地说，你不能。但是，您可以使它们看起来具有相同的高度。

这是一个纯 CSS 实现，在 < IE8 中可能看起来不太正确。我将扩展@Adam 的答案。

  1. 将侧边栏元素包装在一个新的 div ( #sidebar) 中，然后再次float: left.

  2. 设置#wrap { overflow: auto }，这将允许#wrap扩展以包含#sidebar在它变得高于#main. （资源）

  3. 设置#sidebar { width: X }和#main { padding-right: X }。这将使它非常#main尊重左侧将被背景占用的区域#sidebar。

  4. #sidebar最后一部分是为和设置背景#main。我们将通过设置两个背景图像来做到这一点：#wrap { background: url('image1') repeat-y, url('image2') X 0 }，其中 X 是侧边栏的宽度。确保图像与侧边栏的宽度相同，并且仅在 y 方向上重复。第二张图像将偏移到侧边栏的右侧并平铺以填充#wrap's 背景的其余部分。

由于既没有#sidebar也#main没有设定的高度，它们可以随着内容的增长而自由扩展。我们固定#wrap扩展为浮动的高度#sidebar，它通常会扩展以覆盖高度，#main因为它只是一个普通的块元素。因为背景设置为#wrap，所以我们给出两个孩子与父母身高相同的外观。

HTML （已添加#sidebar）

<div id="header">1</div>
<div id="wrap">
    <div id="sidebar">
        <div id="left-nav">2</div>
        <div id="someid">3</div>
    </div>
    <div id="content">4</div>
</div>

CSS

注意：多个图像将无法工作 < IE8。您仍然可以将颜色设置为，#main但它不会扩展到#wrap如果高于#sidebar的高度。#main

#wrap {
    background: url('image1') repeat-y, 
                url('image2') X 0;
    overflow: auto;
}
#sidebar {
    float: left;
    width: X;
}

#main {
    margin-left: X;
}
于 2013-03-15T13:30:31.773 回答
0

您需要使用 equalizeCols （一个 jQuery 插件）使两列的高度相同

-或者-

通过将 3 和 4 包装在容器 div 中并在左侧提供具有不同颜色/图案的背景图像来模拟左侧栏的外观，该背景图像可以在内容的整个高度上重复 -y。说得通？

于 2013-03-14T03:31:54.587 回答
0

我已经通过这种方式解决了我的问题......

#left-nav{position: absolute; width: 329px; height: 100%;}
#someid{height: 70%; bottom: 0;}

但仍建议使用适当的解决方案。

于 2013-03-14T03:06:22.920 回答
0

当您将某些内容设置为 100% 时，它是父元素的 100%。那么父元素的高度是多少呢？如果这没有设置为某个值，那么您可能无法得到您所期望的。如果父级设置为 100%，请问自己：“100% 是什么？父级设置为什么？” Percent 不会给你一个大小，直到你得到一些有价值的东西，它可能只是视口和 html 元素的大小。

于 2013-03-12T11:45:26.837 回答