How to make a div height to fill available space

问题:

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

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).

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

---

HTML code (relevant part of it):

<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):

#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;
}

回答1:

The CSS solution is to style the outer container with the background color, this is called a fake (faux) 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.

回答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.

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

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:

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

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

回答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.

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

回答6:

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

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

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"

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 ;)

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)

<!--[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)

---

• ^{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!}

回答7:

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

So here's what I suggest:

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

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

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

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.

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!

回答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.

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:

#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.