Grow a Relatively positioned Div with an Absolutely positioned inner Div
Question
- I have a relatively positioned div with height and width set.
- Then I have an absolutely positioned div (inside #1) with top, width, height set.
What I want is:
If I add contents to inner div (Absolutely positioned), it should grow with the contents despite of its original height set.
If the inner div expands then the outer div (relatively positioned) div should expand as well.
Note: While there have been other answers on stackoveflow.com about removing the positioning from inner div. This can't work for me as I see.
So an answer based on pure CSS (or Javascript if not possible by CSS at all) is what I'm looking for here without touching the positioning elements of the divs at all.
A code snippet [Pardon me, I can't write such noisy CSS myself in the elements, it's my tool :/]. For the sake of clarity I'm posting the code as it is:
<html>
<head>
<title>New Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="background-color: lightgray">
<div id="34ef9e8e-7d99-4690-8788-d2caf23cf33e" style="position: relative; clear: both; margin: 0 auto; top:5; left: 5; height: 300; width: 500; font-family: Arial; font-face: Arial; font-size: 12; font-weight: normal; font-style: normal; ; color:#000000; background-color:#ffffff">
<div id="f79e1b12-d4bb-433b-9e2c-33a3c1b2b89a" style="position: absolute; clear: both; border: 1px solid #000000; top:46; left: 97; height: 200; width: 300; font-family: Arial; font-face: Arial; font-size: 12; font-weight: normal; font-style: normal; ; color:#000000; background-color:#ffffff">
<div style=" background-color: #000000; color: #ffffff; line-height:24px; width: 100%; height: 24px"><span style="padding-left: 2px">Title</span></div>
<div style="position: relative;">
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,<br>
</div>
</div>
</div>
</body>
3 answers
solution1
1 2014-02-10 23:37:06
You can do this with automatic height and width in your elements, as demonstrated in this fiddle .
Basically, your inner element will resize itself automatically to fill its height and width constraints, but you then have to add javascript/jquery to check the height of the element and make sure that it still fits inside the parent element:
function checkHeight()
{
var extra = $("#inner").height() + parseInt($("#inner").css("top"));
if($("#outer").height() < extra)
{
$("#outer").height(extra);
}
}
function checkWidth()
{
var extra = $("#inner").width() + parseInt($("#inner").css("left"));
if($("#outer").width() < extra)
{
$("#outer").width(extra);
}
}
If the height of the inner element plus the top of the inner element is greater than the height of the outer element, it sets the height of the outer to that sum.
This works fabulously for height, but there is one thing to note for width. You will have to set the width of the inner element to be larger if you want it to be wider than the largest inline elements.
Text, for example is inline around words, so it will wrap unless you set the width of the inner element to accommodate the width of the text.
Let me explain:
Say I have the inner div's content as something like this:
Blah, blah, blah, blah, blah<br>
Blah, blah, blah, blah, blah
If the width of the div is only big enough to accommodate 4 blahs, it will look like this:
Blah, blah, blah, blah,
blah
Blah, blah, blah, blah,
blah
So to fix this and get the expected result as shown in the code, you will have to set the width of the div to be the same width or bigger than the width of all five blahs.
Make sense?
Fiddle
Happy coding!
solution2
0 2014-02-10 23:12:25
Use min-height instead of height in your CSS. (Since you haven't posted any details, I can't offer any more specifics.)
You'll have to use JavaScript to set the height of the outer <div> to match the inner one.
Here's a crude fiddle
solution3
0 ACCPTED 2014-02-10 23:15:03
Does the inner element HAVE to be absolutely positioned?
If not, you can use min-height , as in this JSFiddle :
.parent{
position:relative;
min-height:300px;
width:300px;
padding: 30px 0;
background-color:red;
}
.child{
position:relative;
left: 100px;
min-height: 200px;
width:100px;
background-color:yellow;
}
So position:absolute is relative to the most recent ancestor who isn't static , which is the default state (ie in your case, your position:relative element.
Look at this JSFiddle to see what I am talking about.
See how the SECOND .absolute div is at the TOP of the page and not the top of the second .parent ? That is because the <div> (which is the parent of the SECOND .absolute is the default position:static , SO the SECOND .absolute is positioned absolutely RELATIVE to the body/html/page!
In your use case, INSIDE an element which has position:relative , direct child elements should behave very similarly when using relative/absolute on them.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.