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

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

已邀请:

8 个回复

鞋扣蚊冈借

CSS解决方案是使用背景颜色设置外部容器的样式，这称为假的（仿造的）bakcground。像这样：

#iconsHolder {
    background-color: #DDD;
}

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

讹巳漓把备

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

淑灯

您所采用的方法非常令人困惑，并且使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行中删除“ 8”，并将此代码插入底部。

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

程琶

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

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

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

筷啸够对铅

除了将背景颜色添加到容器之外，您还需要使容器占用孩子的空间。您可以在容器中添加“ 11”，例如Richard \'s answer或如果不想使容器浮动，则可以在其后添加一个空的“ clear” div。从语义上讲，它不太正确，但是如果您不能或不希望容器浮动，则这是另一个选择。 JsFiddle： http://jsfiddle.net/gvJrJ/4/

琳娘

可以使用HTML / CSS完成此操作还是可以必须使用一些JavaScript？ ..可以使用display: table-cell用纯CSS完成。.但是没有iE7及以下支持：( 这是一个同时包含两种方法（jQuery *和CSS）的解决方案，jQuery当然会为其他浏览器做同样的事情，但是这种解决方案意味着大多数用户将获得仅具有IE7及以下功能的纯CSS解决方案。 jQuery的“增强” 如果要在所有浏览器中使用jQuery解决方案，则不需要table-cell或table-row显示属性，并且需要从float属性中删除!ie7hack-浮点数还需要跨浏览器包含，这样您就可以在#iconsHolderdiv中添加overflow: hidden-如果您需要在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添加到我的答案中！

坝镰补翔奋

如您所说，在#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等效项一无所知。是的，我意识到这有点棘手，但是它可以完成工作而不必计算高度或其他任何东西。希望这可以帮助！

勺的驴吓识

目前，您的专栏正在尽可能地扩展文本。如果我的问题正确无误，您希望列的背景色/图像超出可用数据的范围。如果那是您想要的，那么您必须创建伪列（Faux Columns），因为这些列中的数据不能覆盖整个高度。我认为最简单的方法是将重复的背景图像应用到一个元素上，该元素跨越您的layount的整个高度。这可能是封装您的列的某种包装器。在您的情况下，您可以应用一个细小的图像，该图像分为三个色带（每个色带18em，每个色带映射为覆盖特定的列），用于信息，比较和故事div。该图像的宽度为60em，并在y轴上重复，例如：

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

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

要回复问题请先登录或注册

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

8 个回复

发起人

fill

css

html

height

问题状态

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

与内容相关的链接

8 个回复

发起人

fill

css

html

height

问题状态