Menu
<html style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
<body style="height:100%;width:100%;">
<div style="height:20px;background-color:red;"></div>
<div style="background-color:black;"></div>
<div style="height:20px;background-color:blue;"></div>
</body>
</html>
How can I make the second div stretch to fill remaining space (after placing the first and third div) in the body?
963
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
If I understand your intent properly (who knows..):
Live Demo (edit)
HTML:
<div id="top"></div>
<div id="mid"></div>
<div id="bot"></div>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
}
body {
color: #fff
}
#top, #mid, #bot {
position: absolute;
width: 100%
}
#top {
height: 20px;
background: red;
top: 0;
}
#mid {
background: #000;
top: 20px;
bottom: 20px
}
#bot {
height: 20px;
background: blue;
bottom: 0
}
If you want the stick footer system, then use this technique:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
.footer, .push {
height: 20px;
}
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
30
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
