How to put the height of a div that contains other with absolute position?_问答_开发者

How to put the height of a div that contains other with absolute position?

开发者 https://www.devze.com 2023-01-27 15:33 出处：网络

How to put the height of a div that contains other with absolute position? <html> <head> <style type=\"text/css\">

相关专题：css

How to put the height of a div that contains other with absolute position?

<html>
<head>
<style type="text/css">
.a{

}
.b{
position:relative;
}
.c{
position:absolute;
}
</style>
</head>

<body>

<div class="a">
<div class="b">
<div class="c">
   ESTO ES LO QUE CONTIENE EL DIV<br/>
   ESTO ES LO QUE CONTIENE EL DIV<br/>
   ESTO ES LO QUE CONTIENE EL DIV<br/>
   ESTO ES LO QUE CONTIENE EL DIV&l开发者_如何学运维t;br/>
</div>
</div>
</div>


</body>

</html>

The height of the div class "a" is zero

An absolutely positioned element does not take up any space in the layout, meaning that <div class='a'> won't expand to wrap it.

The only way you could possibly do this is to measure the height of .c via javascript and then set height of .a explicitly -- the downside, of course, is requiring javascript to do so.

Depending on where you are trying to position .c you may want to consider using a float instead, which CAN be wrapped.

it will not matter if you give DIV B a height smaller than DIV C , because DIV C can over lap its container.

sorry if I didn't get the question right

A <div> or any other block-container will automatically grow vertically according to the content, but once you position:absolute any <div>, you are removing it from its parent content and no longer makes its parent expands.

You might want to try to float the <div class="c"> instead of absolutely position it. That way the div will continue to be part of its parent content, though you would have to set the <div class="a"> to overflow:auto in order to make it expand on floated elements.