Child DIV change height to match other child DIV
I have scoured the internet looking for a solution to this and I am sure it is right under my nose. Will someone please help?
I have a parent div with two children. Each child has static widths and I need each one to change their height to match the other according to the content. In other words, If "child-div-a" is taller than "child-div-b, then "child-div-b" needs to automatically scale the same height of "child-div-a". I have been able to get the parent to scale to the largest child but not the other child. I cannot seem to get the left div (a) to always be the same height as the right/content div (b). You would think this would be very simple or maybe I'm an idiot.
Thank you in advance for all help.
Joshua
开发者_Go百科My probelm has been solved.
The first response I saw from japanPro contained a link to Ed Elliot's blog. That contained info on faux columns. I fairly simple concept that I can't believe I didn't see. It was all smoke and mirrors, but I was too focussed on the illusion to see how the trick can be done (if that makes any since). Here is the CSS I came up with:
#child-div-container{
width: 800px;
position: relative;
overflow: hidden;
background-image: url(../../../images/faux_column_bkground.gif);
background-repeat: repeat-y;
}
#child-div-a{
float: left;
width: 125px;
}
#child-div-b{
float: left;
width: auto;
height: 100%;
margin-left: 5px;
}
Thank you again to everyone who responded to my needs. Everyone gave viable information. I only hope I can develop my skils and knowledge to the point of offering advice instead of asking for it.
Joshua
there is two way to do
- javascript way , use jquery equal height
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
- other way is using css
http://www.ejeliot.com/blog/61
I don't know of a good CSS-based answer for you. But you can accomplish this easily with jQuery.
Suppose you have the following markup
<div id="parent">
<div>My content</div>
<div>Other div with content</div>
</div>
Here's a jQuery plugin that lets you do this as simply as:
$("#parent div").equalHeights();
This is a very common problem in html/css. There's tricks to do this in Javascript, but I'm not sure if that's what you're looking for.
Two solutions for this problem that don't use javascript:
Faux Columns - Only works if the background of the column that has to stretch has only one background color or a repeating pattern (because it uses an image or border to fake a column). This might not work as well though when you can't predict with div will be taller.
Equal Height Columns - CSS trick that I haven't yet tested.
Here is a jquery method as I found on CSS Tricks an EXCELLENT resource!
var maxHeight = 0;
$("div").each(function(){ if ($(this).height() > maxHeight) { maxHeight =
$(this).height(); } });
$("div").height(maxHeight);
精彩评论