如何使 div 高度以填充可用空间答案

【问题标题】：How to make a div height to fill available space如何使 div 高度以填充可用空间
【发布时间】：2013-04-29 09:03:28
【问题描述】：

我有一个 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;
}

【问题讨论】：

使三个“列”的容器背景颜色相同。您可能不想实际拉伸这些 DIV 的高度。
+1，好问题，好布局，好图形。

标签： css html height fill

【解决方案1】：

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

像这样：

#iconsHolder {
    background-color: #DDD;
}

这种方法（至少在这种情况下）保证背景对所有人都是一样的。

【讨论】：

我不认为只添加背景颜色会起作用，如果没有，div 必须放置在某个地方，然后它不会填充空间。所以如果你添加 float:left 那么你应该很好。
@Richard Fantozzi 也许是这样，但如果是这样的话，那么float: left 不是最好的解决方案，我会选择height: auto; 和overflow: hidden;，它工作得更好并且解决了浮动问题： )
我一直在考虑这种假背景方法，但它不起作用，因为我将在鼠标悬停时更改列的背景（使用 jQuery），所以假背景没有意义（至少在这种情况下不是）。
假背景法是最好的改变背景的方法。使用 jQuery 设置背景的类，并将这些类设置为精灵图像的背景位置值。
应该有办法告诉 css 100% 表示父级的高度，或子级的总高度，或直到下一行的可用空间，或整个屏幕的可用空间。男人 SUCKSSSSSSSSSS

【解决方案2】：

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

【讨论】：

我应该按照你的建议设置我的列（#info、#comp、#story）位置：绝对吗？
是的，只要你把它们的容器位置：相对。请记住，您必须设置每个内部列的 left 属性。我个人不会使用 em 单位来处理这类事情，而是以 px 尺寸计算所有内容。
不，不起作用。检查这个：tinyurl.com/3nwayhw 我已经将iconsHolder 设置为relative，并将info、comp 和story 设置为absolute，它们的顶部和底部分别为0 和左侧为0、20 和40 em。这就是我得到的。这种方法有什么问题？
您可以在jsfiddle.net 上发布您的代码吗？很难从图像中看出哪里出了问题。
jsfiddle.net/HZqAs 除了不显示图片。我应该将它们上传到网络上的某个地方还是对您来说足够了？感谢您的时间和兴趣提供帮助。 :)

【解决方案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;
}

【讨论】：

【解决方案4】：

一个相当简单的解决方案是将容器 div iconsholder 作为背景：

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

将其添加到您的 css 中，它应该可以在所有浏览器中使用。

【讨论】：

是的，但我不希望它们都是相同的颜色。否则我会为他们的容器设置背景。但是由于我将使用 jQuery 在鼠标悬停事件上更改它们的背景颜色，因此该解决方案将不起作用。如果我要在背景中放置一些图形，而不仅仅是纯色，它也行不通。不过谢谢你的建议。

【解决方案5】：

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

您可以将float:left 添加到容器中，例如Richard's answer 或如果您不想让容器浮动，您可以在之后添加一个空的“清除”div。它在语义上不太正确，但如果您不能或不希望容器浮动，这是另一种选择。

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

【讨论】：

【解决方案6】：

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

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

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

如果您想为所有浏览器使用 jQuery 解决方案，那么您不需要 table-cell 或 table-row 显示属性，您需要从 float 属性中删除 !ie7 hack - 浮动也需要包含在跨浏览器中，因此您可以将overflow: hidden 添加到#iconsHolder div - 如果您需要它在IE6 中工作，只需将zoom: 1; 留在原处；）

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，因为我不知道如何将它放在小提琴的条件注释中）

^{如果您更喜欢纯 javascript 解决方案，我很抱歉，我不能这样做 - 但我敢肯定，如果这就是您想要的，有人可以将纯 JS 添加到我的答案中！}

【讨论】：

【解决方案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 等价物一无所知。

是的，我意识到这有点骇人听闻，但它可以完成工作，而无需计算高度或其他任何东西。希望这会有所帮助！

【讨论】：

【解决方案8】：

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

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

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

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

【讨论】：