Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

stretching div to fill body

Tags:

html

css

layout

<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?

like image 963
oneat Avatar asked Feb 14 '11 19:02

oneat


People also ask

How do I get my body to fill the page?

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.

How do I make a small image fit in a big div?

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.


2 Answers

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
}
like image 162
thirtydot Avatar answered Oct 29 '22 20:10

thirtydot


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/

like image 30
John Lewis Avatar answered Oct 29 '22 19:10

John Lewis