javascript - Set responsive div height to equal its sibling - Stack Overflow

admin管理员组

文章数量:1344473

I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.

Is there a way to acplish this without javascript?

/

I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.

Is there a way to acplish this without javascript?

http://jsfiddle/5JU2t/

• javascript
• html
• css

Share Improve this question Follow asked Aug 30, 2012 at 18:00 Dave KissDave Kiss 10.5k1111 gold badges5555 silver badges7575 bronze badges 3

• only other way I know of but no use really if you don't need a fixed height container jsfiddle/p3WjC I personally would not use this - another solution I use is css if your wanting to get the right column to always have its bg image showing the full length of the page? – codeguy Commented Aug 30, 2012 at 18:06
• 1 The old school faux columns handles this sort of thing nicely. – steveax Commented Aug 30, 2012 at 18:22
• that's what I meant ye with the css! best solution I think – codeguy Commented Aug 30, 2012 at 18:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 12

The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.

Just remember to position the parent (.main) div relatively and remove all of the floats:

.right {
    bottom:0;
    position: absolute;
    right:0; 
    top: 0;
}

.main {
    position: relative;
}

Working example: http://jsfiddle/5JU2t/1/

Note

The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:

Working example: http://jsfiddle/5JU2t/2/

I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.

Set the parent (.main) to display as table and set the children (.right, .left) to display as table cell.

I would say funk all the extra css and use a table layout

本文标签： javascriptSet responsive div height to equal its siblingStack Overflow