div with 100% height in dynamicly sized element
To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in开发者_如何学Python size as it should be.
Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don't work. How could I achieve such behavior?
http://109.91.124.194/nucleareducated_2/index.php
This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.
As you have probably guessed, it's pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.
IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.
#containerdiv {
display:table;
}
#childdivleft, #childdivcenter, #childdivright {
display: table-cell;
}
The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.
#leftdiv,#rightdiv {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
You can also use -
jQuery - Columns of Equal Height with JQuery
several other solutions - CSS - Equal Height Columns?
let me know if this is what you are looking for: tested in chrome*
<html>
<head>
<style>
html, body {
height:100%;
}
</style>
</head>
<body>
<div style="clear: both; height:100%;">
<div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
<div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
<div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>
</body>
</html>
Maybe this is what you mean? You can add a div around the left and right div if you want an area with 100% height.
CSS:
* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }
HTML:
<div>
<div id="around">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</div>
加载中,请稍侯......
精彩评论