I'd like to make a page container div have a top margin of 10% and bottom margin of 10%. How can I make the div take the remaining 80% of the page, all the time ( no matter if it has content or not )?
This should work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #FFCC00;
}
</style>
</head>
<body>
<div>
This should prove my point.
</div>
</body>
</html>
You can try:
CSS
---
.container {
margin-top:10%;
margin-bottom:10%;
height:80%;
}
<div class="container"></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