Fit absolutely positioned DIV *completely* in relatively positioned parent DIV?
Question
I want to use CSS (not JavaScript) to fit a child DIV with position:absolute EXACTLY into its position:relative parent. It's the EXACTLY part that's the problem.
As shown in the following image, the child DIVs fit very nicely inside the parent DIV's left/right and top margins but overflow the parent DIV's bottom margin by (what appears to be) 1px .
A key point is that I've tried various combinations of HEIGHT for the child DIV. This approach doesn't really fix the problem because resizing the page moves the child DIV's bottom margin relative to its parent. So I don't believe the fix is to change the value of HEIGHT.
This is the CSS:
div.container{
position: relative;
background-color: #fafafa;
margin: 2%;
border: solid 2px orange;
padding: 2%;
height: 100%; /* Expands container to height of HTML & BODY */
}
div.leftSideNav,
div.rightSideNav
{
height: 100%; /* Changing height doesn't seem to truly fix the problem */
width: 1.5%;
background-color: #ccffcc;
margin: 0px;
border: solid 1px #33bb88;
padding: 0px;
position: absolute;
top: 0px;
color: #333333;
}
div.leftSideNav{
left: 0px;
background-color: pink;
}
div.rightSideNav{
right: 0px;
}
Here's the corresponding XHMTL:
<body>
<div class="container">
<div class="leftSideNav" />
<div class="rightSideNav" />
</div>
</body>
I've gone 'round in circles experimenting and trying to get the child DIVs' bottom margins to fit inside their parent ala the top/left/right margins. I've found lots of general discussions but none that specifically address how to get the bottom margin of the child DIVs inside their parent.
3 answers
solution1
4 2016-05-23 23:43:53
Your absolutely positioned children have a 1px border around them:
border: solid 1px #33bb88;
That is the source of the overflow.
height:100% + 1px + 1px = 2px overflow
You could use the CSS calc() function to make the elements fit precisely:
height: calc(100% - 2px);
OR
Adjust the CSS Box Model to include padding and borders in width / height calculations. The default is box-sizing: content-box . Try box-sizing: border-box instead.
div.leftSideNav,
div.rightSideNav
{
height: calc(100% - 2px); /* OPTION #1 */
box-sizing: border-box; /* OPTION #2 */
width: 1.5%;
background-color: #ccffcc;
margin: 0px;
border: solid 1px #33bb88;
padding: 0px;
position: absolute;
top: 0px;
color: #333333;
}
References:
solution2
3 ACCPTED 2016-05-23 23:52:57
Delete height:100%;
and add
top:0px;
bottom:0px;
and you are all set. Full cross browser compatible
solution3
0 2016-05-24 01:55:06
Adding a box-sizing property will resolved your issue.
HTML:
<div class="container">
<div class="leftSideNav">
<a class="arrow" href="#"><i class="fa fa-arrow-left"></i></a>
</div>
<div class="rightSideNav">
<a class="arrow" href="#"><i class="fa fa-arrow-right"></i></a>
</div>
</div>
and CSS:
div.container {
position: relative;
background-color: #fafafa;
margin: 2%;
border: solid 2px orange;
padding: 2%;
height: 100px/* Expands container to height of HTML & BODY */
}
div.leftSideNav,
div.rightSideNav {
height: 100%; */ Changing height doesn't seem to truly fix the problem */
background-color: #ccffcc;
margin: 0px;
border: solid 1px #33bb88;
padding: 0px;
position: absolute;
top: 0px;
color: #333333;
box-sizing: border-box;
vertical-align: middle;
width: 25px;
}
div.leftSideNav {
left: 0px;
background-color: pink;
}
div.rightSideNav {
right: 0px;
}
.arrow {
font-size: 25px;
color: #999;
width: 25px;
position: absolute;
top: 50%;
margin-top: -10px;
}
div.leftSideNav:hover .arrow,
div.rightSideNav:hover .arrow {
color: #333;
}
Click here for Demo
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.