如何设置 div 高度来填充可用空间

Question

我有一个 3 列布局，列下方有一些详细信息。

您会注意到其中一列的高度大于其他列的高度。我希望其他两个 div 自动填充剩余空间（直到蓝色 div）。文本将动态加载，因此我需要它与任何更大的列（并且任意数量）一起使用。

这可以通过 HTML/CSS 完成还是必须使用一些 JavaScript？

---

HTML 代码（相关部分）：

<div id="content">

    <div id="iconsHolder">

        <div id="info">
            <div id="info_content">
                <p><?php echo img('images/man.png'); ?></p>
                <h2>Some guy over here</h2>
                <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
            </div>
        </div>

        <div id="comp">
            <div id="comp_content">
                <p><?php echo img('images/computer.png'); ?></p>
                <h2>Computer Development</h2>
                <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
        </div>

        <div id="story">
            <div id="story_content">
                <p><?php echo img('images/library.png'); ?></p>
                <h2>Story telling</h2>
                <p class="light justify">This is another short story.</p>
            </div>
        </div>
    </div>
    <div id="details">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

</div>

---

CSS 代码（相关部分）：

#content {
    width: 60em;
    margin: 0px auto;
}

#info,#comp,#story {
    width: 18em;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    background-color: #DDD;
    height: 100%;
}

#info_content,#comp_content,#story_content {
    text-align: center;
}

#details {
    clear: both;
    background-color: #EEF;
    padding: 1em;
}

Answer 1

CSS 解决方案是使用背景颜色设置外部容器的样式，这称为假 (faux) bakcground。

像这样：

#iconsHolder {
    background-color: #DDD;
}

这个方法（至少在这种情况下）保证所有人的背景都是相同的。

Answer 2

您可以将它们绝对定位在 div#iconsHolder 中（您将使其成为 position:relative），而不是浮动 div。无论如何，您都在设置宽度，只需设置每个的左侧div 到适当的偏移量并给出每个 top:0 和 bottom:0 CSS 规则。

Answer 3

你所做的方法非常令人困惑，并且会让 CSS 更难以控制。如果将其转换为表格，您会得到更好的结果。

<table id="content" cellspacing="0">
<tr id="row">
<div id="iconsHolder">

    <td id="info">
        <div id="info_content">
            <p><?php echo img('images/man.png'); ?></p>
            <h2>Some guy over here</h2>
            <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
        </div>
    </td>

    <td id="comp">
        <div id="comp_content">
            <p><?php echo img('images/computer.png'); ?></p>
            <h2>Computer Development</h2>
            <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        </div>
    </td>

    <td id="story">
        <div id="story_content">
            <p><?php echo img('images/library.png'); ?></p>
            <h2>Story telling</h2>
            <p class="light justify">This is another short story.</p>
        </div>
    </td>
</div>
</tr>
    <tr id="bottom">
<td id="details" colspan="3">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
    </tr>
</table>

然后，您需要从 CSS 第 8 行删除 float:left; 并将此代码插入到底部。

tr#row td {
    width: 30%;
    background-color: #DDD;
    vertical-align: top;
}

Answer 4

一个相当简单的解决方案是将容器 div iconholder 作为背景，如下所示：

#iconsHolder { background-color: #DDD; float:left;}

将其添加到您的 css 中，它应该适用于所有浏览器。

Answer 5

除了向容器添加背景颜色之外，您还需要使容器占据子容器的空间。

您可以将 float:left 添加到容器，例如 理查德的回答 或
如果你不想让容器浮动，你可以在后面添加一个空的“clear”div。它在语义上不太正确，但如果您不能或不希望容器浮动，这是另一种选择。

JsFiddle：
http://jsfiddle.net/gvJrJ/4/

Answer 6

这可以用 HTML/CSS 来完成吗？
必须使用一些 JavaScript 吗？

.. 可以使用 display: table-cell 通过纯 CSS 来完成.. 但没有 iE7 及以下支持:(

这是一个使用包含两种方法（jQuery* 和 CSS）的解决方案，jQuery当然，对于其他浏览器也会做同样的事情，但是这个解决方案意味着大多数用户将获得一个纯 CSS 解决方案，只有 IE7 及以下版本需要 jQuery 来“增强”，

如果您想对所有浏览器使用 jQuery 解决方案，那么您不需要 table-cell 或 table-row 显示属性，并且您需要从 float 属性中删除 !ie7 hack -浮动还需要跨浏览器包含，因此您可以将 overflow: hide 添加到 #iconsHolder div - 并保留 zoom: 1; 如果您需要在 IE6 中工作，请放在适当的位置;)

CSS:

#content {
    width: 60em;
    margin: 0px auto;
}

#iconsHolder { 
    display: table-row; /* good browsers - IE7 and below ignore this */
    zoom: 1; /* for IE to contain the floats so the jQuery can get a height from it */
    /* overflow: hidden; would be needed here if jQuery solution is preferrred */
}

#info,#comp,#story {
    width: 18em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    background-color: #DDD;
    display: table-cell;
    float: left !ie7; /* IE7 and below hacked value - remove the !ie7 part to expose this to all browsers */ 
}

#info_content,#comp_content,#story_content {
    text-align: center;
}

#details {
    clear: both;
    background-color: #EEF;
    padding: 1em;
}

HTML:

<div id="content">
 <div id="iconsHolder">
  <div id="info">
    <div id="info_content">
     <p><img src="http://placekitten.com/100/100/" alt=""></p>
     <h2>Some guy over here</h2>
     <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
    </div>
   </div>
   <div id="comp">
    <div id="comp_content">
     <p><img src="http://placekitten.com/100/100/" alt=""></p>
     <h2>Computer Development</h2>
     <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
    </div>
   </div>
   <div id="story">
    <div id="story_content">
     <p><img src="http://placekitten.com/100/100/" alt=""></p>
     <h2>Story telling</h2>
     <p class="light justify">This is another short story.</p>
    </div>
  </div>
 </div>

  <div id="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

jQuery: （在条件注释内，因此仅适用于 IE7 及以下版本看到它）

<!--[if lte IE 7]>
<script type="text/javascript">
$(document).ready(function() {

    var divHeight = $("#iconsHolder").outerHeight();          
    $("#iconsHolder > div").css("height", divHeight);

});
</script>
<![endif]-->

添加： JSfiddle

注意：小提琴没有添加 jQuery，因为我没有添加 jQuery不知道如何将其放入小提琴的条件注释中）

---

• ^{如果您更喜欢纯 JavaScript 解决方案，我深表歉意，我不能这样做 - 但我确信如果这就是您想要的，有人可以添加纯JS来我给你的回答！}

Answer 7

正如您所说，在 #iconHolder 中使用人造背景的问题是在鼠标悬停时突出显示每一列。

因此，我的建议如下：

1) 将各个人造列绝对定位在与原始列相同的位置

您将使用 z-index 属性来确保内容在顶部

HTML

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>

<div id="faux1"></div>
<div id="faux2"></div>
<div id="faux3"></div>

CSS

#iconHolder {
    position: relative;
}

#col1, #col2, #col3 {
    position: relative
    z-index: 100;
}

#faux1, #faux2, #faux3 {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #DDD /* don't add a background to your real columns, just your faux */
    z-index: 50;
}

#faux2 {
    left: 20em;
}

#faux3 {
    left: 40em;
}

2) 将您的 onmouseover/onclick 事件附加到人造列和普通列

function highlight() {
     faux.style.backgroundColor = "yellow"
}

function whatever() {
    //your code here
}

column.onmousover = highlight
faux.onmouseover = highlight
column.onclick = whatever
faux.onclick = whatever

如果您需要有关 javascript 的更多详细信息，请询问，我只是不知道不过，在 jQuery 等价物上。

是的，我意识到这有点黑客，但它可以完成工作，而无需计算高度或任何东西。希望这有帮助！

Answer 8

目前，您的列已跨越文本所能到达的范围。如果我正确地回答了您的问题，您希望列背景颜色/图像扩展到可用数据之外。如果这就是您想要的，那么您必须创建假列（假列），因为这些列中的数据不会跨越整个高度。

我认为最简单的方法是将重复的背景图像应用于跨越布局整个高度的元素。这可能是某种封装您的列的包装器。在您的情况下，您可以为信息、比较和故事 div 应用一个分为三个色带（每个色带 18em，每个色带映射到覆盖特定列）的薄图像。该图像的宽度为 60em，并且会在 y 轴上重复，例如：

#content 
{
background: #ccc url(fake-columns.gif) repeat-y left top;
}

这假设图像与 css 文件位于同一文件夹中（不推荐，images/fake-columns.gif 更好，以便从以下位置引用图像）图像文件夹）。 Repeat-y 将向下重复小图像，覆盖内容 div 覆盖的整个高度。左上确保图像从左上角开始平铺，这正是您通常想要做的！内容之前的井号似乎从我上面的示例 css 中消失了。