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

I have a 3 column layout with some details below the columns.

我有一个3列布局,列下面有一些细节。

You will notice that one of the column's height is greater than the others'. I'd like the other two divs to automatically fill the remaining space (up to the blue div). The text will be loaded dynamically so I need this to work with any column being larger (and by an arbitrary amount).

您会注意到其中一列的高度大于其他列的高度。我希望其他两个div自动填充剩余的空间(直到蓝色div)。文本将动态加载,因此我需要使用此文件来处理任何更大的列(以及任意数量的列)。

Can this be done with HTML/CSS or do I have to use some JavaScript?

这可以用HTML / CSS完成,还是必须使用一些JavaScript?

---

HTML code (relevant part of it):

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 code (relevant part of it):

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 个解决方案

#1

The CSS solution is to style the outer container with the background color, this is called a fake (faux) bakcground.

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

Like this:

#iconsHolder {
    background-color: #DDD;
}

This method (in this case at least) guarantees the background is the same for all.

这种方法(至少在这种情况下)保证所有人的背景相同。

#2

Instead of floating the divs you could absolutely position them within div#iconsHolder (which you will make position:relative. You're setting widths anyway, just set the left of each div to the appropriate offset and give each top:0 and bottom:0 CSS rules.

而不是浮动div,你绝对可以将它们放在div#iconsHolder中(你将做位置:相对。你无论如何都要设置宽度,只需将每个div的左边设置为适当的偏移量并给出每个顶部:0和底部: 0 CSS规则。

#3

The approach you made is very confusing and would make it harder to control with CSS. If you convert it to a table you'd have better results.

您所采用的方法非常混乱,并且会使用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>

Then, you need to remove float:left; from line 8 of your CSS and insert this code at the bottom.

然后,你需要删除float:left;从CSS的第8行开始,在底部插入此代码。

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

#4

A fairly simply solution is to make the container div iconsholder as the background like:

一个相当简单的解决方案是将容器div iconholder作为背景,如:

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

Add that to your css and it should work in all browsers.

将它添加到您的CSS,它应该适用于所有浏览器。

#5

In addition to adding the background color to the container, you'll also need to make the container take up the space of the children.

除了将背景颜色添加到容器之外,您还需要使容器占用子容器的空间。

You can add float:left to the container like Richard's answer or If you don't want to make the container float, you can add an empty "clear" div afterwards. It's less semantically correct, but if you can't or don't want the container floated it's another option.

你可以像理查德的答案一样将float:left添加到容器中。或者如果你不想让容器浮动,你可以在之后添加一个空的“clear”div。它在语义上更不正确,但如果你不能或不想让容器浮动,那么它是另一种选择。

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

#6

Can this be done with HTML/CSS or do I have to use some JavaScript?

这可以用HTML / CSS完成,还是必须使用一些JavaScript?

.. it can be done with pure CSS using display: table-cell.. but there is no iE7 and below support :(

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

Here's a solution using encompassing both methods (jQuery* and CSS), the jQuery would of course do the same thing for other browsers, but this solution means that most users would be getting a pure CSS solution with only IE7 and below needing the jQuery for "enhancement"

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

if you want to use the jQuery solution for all browsers then you would not need the table-cell or table-row display properties and you would need to remove the !ie7 hack from the float property - the floats would also need to be contained cross-browser so you could add overflow: hidden to the #iconsHolder div - and just leave zoom: 1; in place if you need this to work in IE6 ;)

如果你想为所有浏览器使用jQuery解决方案,那么你就不需要table-cell或table-row显示属性,你需要从float属性中删除!ie7 hack - 浮点数也需要包含交叉-browser所以你可以添加溢出:隐藏到#iconsHolder div - 然后只留下缩放: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: (inside a conditional comment so only IE7 and below see it)

jQuery :(在条件注释里面只有IE7及以下才能看到它)

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

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

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

Added: JSfiddle

Note: the fiddle doesn't have the jQuery added in as I don't know how to put that in a conditional comment on the fiddle)

注意:小提琴没有添加jQuery,因为我不知道如何把它放在小提琴的条件评论中)

---

• ^{I apologise if you'd prefer a pure javascript solution, I can't do that - but I'm sure if that's what you want someone could add the pure JS to my answer for you!}

如果你更喜欢纯粹的javascript解决方案我很抱歉,我不能这样做 - 但我确定你是否想要有人可以将纯JS添加到我的答案中!

#7

As you said, the problem with using a faux background with your #iconHolder is highlighting each column on mouseover.

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

So here's what I suggest:

所以这就是我的建议:

1) make individual faux columns absolutely positioned at the same location as the original column

1)使单独的人造柱绝对位于与原始柱相同的位置

You'll use the z-index property to ensure the content is on top

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

The 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>

The 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) attach your onmouseover/onclick events to both the faux column AND the normal column

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

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

function whatever() {
    //your code here
}

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

If you need more details on the javascript, just ask, I just wouldn't have any idea on the jQuery equivalent, though.

如果你需要关于javascript的更多细节,请问,我只是对jQuery等价物没有任何想法。

Yes, I realize that this is a little bit hackish, but it gets the job done without having to calculate the height or anything. Hope this helps!

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

#8

Currently your columns are spanning as far as the text can go. If I get your question correctly, you would like the columns background color/ image to extend beyond available data. If that is what you want, then you have to create fake columns (Faux Columns) since your data in those columns do not span the whole height.

目前,您的列将跨越文本范围。如果我正确地得到您的问题,您希望列背景颜色/图像扩展到可用数据之外。如果这是您想要的,那么您必须创建假列(Faux Columns),因为这些列中的数据不会跨越整个高度。

I think the easiest way is to apply a repeating backgroung image to an element WHICH spans the full height of your layount. This could be some sort of wrapper that encloses your columns. In your case you may apply a thin image that is divided into three color bands (18em each and each mapped to cover a particular column) for the info, comp and story divs. That image would be 60em in width and would repeat in the y- axis e.g:

我认为最简单的方法是将一个重复的背景图像应用到一个元素,该元素跨越你的全部高度。这可能是某种封装您的列的包装器。在您的情况下,您可以应用一个薄图像,该图像分为三个色带(每个色带18em,每个色带映射以覆盖特定列),用于info,comp和story div。该图像的宽度为60em,并在y轴上重复,例如:

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

This assumes the image is in the same folder as the css file (not recomended, images/fake-columns.gif is better so that the image is referenced from the image folder). Repeat-y will repeat the tiny image downwards covering the whole height the content div covers. Left top ensures the image starts tiling from the top left corner which is what you would normally want to do! The pound symbol before content seems to dissapear from my example css above.

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