Menu
My problem is that my background container is displayed only till the screen bottom. I can't see it in the part after that. I tried nearly everything but nothing seems to work for me. I want it to be adjusted according to page size.
<body>
<div id="profilebg">
<!-- Other divs -->
</div>
</body>
And my CSS is
html, body {
height:100%;
}
#profilebg
{
position: absolute;
margin-left:10%;
margin-right:10%;
width:80%;
background-color:#ffffff;
height: 100%;
top: 0;
bottom: 0;
display: block;
}
249
asked Dec 01 '25 00:12
If you don't specify a height, it defaults to 'auto' which is determined by the height of the content.
If you float something inside of the content be sure to add an element with ccs style clear:both so that the parent can correctly determine it's height.
Similarly if any child of an element uses absolute positioning, it will not be able to determine it's height automatically as the absolutely positioned child is no longer in the same scope as the parent.
A sample working style would be:
html, body {
height:100%;
}
#profilebg
{
margin: 0 10%;
background-color:#ffffff;
}
Edit: More concise CSS styles - width is redundant with margins
Edit 2: Add line about absolute positioning
Edit 3: Div structure to achieve request in below comments:
<div id="page-container">
<div id="header-container">
<!-- Put your header here -->
</div>
<div id="body-container">
<div id="profilebg">
<!-- Profile BG Container -->
</div>
<!-- Any other body content here -->
</div>
<div id="footer-container">
<!-- Footer content here -->
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
