Paul Paul - 4 years ago 114
CSS Question

How to get the main div to fill as much vertical space as possible

I have a project for a photography site. I am fairly new so still struggling with some of the basics. My project will have a header, a main div where the photos will be displayed and a footer. I want my main div to fill as much space as possible with the footer right at the bottom (as you'd expect). But this is what I am getting:

enter image description here

I have provisionally set the background-color of the header and footer to yellow, the color of the main div to red and the body is set to green. This is to better solve the issue. What I want is no green and the footer to be right at the bottom, with the rest being red, no matter the size of the window.
Here is my code:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>

</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>

</html>


css

@font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}

@font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}

body {
/* height: 100%;*/
background-color: green;
}

#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
height: 100px;
width: 100%;
background-color: yellow;
}

p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}


a:link {
text-decoration: none;
color: inherit;
}

a:visited {
text-decoration: none;
color: inherit;
}

div {
margin: 0px;
padding: 0px;
}

#wrap {
clear: both;

padding: 0px;
width: 100%;

background-color: red;
}

body {
margin: 0px;
padding: 0px;
}

#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}

#controllers {

position: static;
height: 20px;
}

#previous {
position: absolute;
left: 0px;
}

#next {
position: absolute;
right: 0px;
}

#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}


.buttons {
cursor: pointer;
}


#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}

#front {
display: block;
}


Thank you,

David

Answer Source

The problem is that your main div takes up very little space and therefore the body extends to cover the screen. In this case you could fix the footer always in the lowest position

@font-face {font-family: Eagle-Light;
                    src: url("Eagle-Light.otf") format("opentype");
                    }

@font-face {font-family: Raleway Light;
                    src: url("Raleway Light.otf") format("opentype");
                    }

body {
/*  height: 100%;*/
    background-color: green;
}

#header {
    height: 100px;
    width: 100%;
    background-color: yellow;
}

#footer {
    position: absolute;
    height: 100px;
    width: 100%;
    background-color: yellow;
    display: block;
    bottom: 0;
}

p {
    color: #818181;
    font-family: Eagle-Light;
    line-height: 1.7em;
    padding: 0px;
    margin: 0px;
    font-size: 0.5em;
    letter-spacing: 0.21em;
}


a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    text-decoration: none;
    color: inherit;
}

div {
    margin: 0px;
    padding: 0px;
}

#wrap {
    clear: both;

    padding: 0px;
    width: 100%;

    background-color: red;
}

body {
    margin: 0px;
    padding: 0px;
}

#container {
    min-width: auto;
    position: relative;
/*  height: 77%;*/
    width: 550px;
    margin: 0 auto;
/*  margin-top:7%;*/
}

#controllers {

    position: static;
    height: 20px;
}

#previous {
    position: absolute;
    left: 0px;
}

#next {
    position: absolute;
    right: 0px;
}

#tag {
    position: static;
    height: 20px;
    line-height: 1.7em;
    padding-top: 5px;
}


.buttons {
    cursor: pointer;
}


#imagewrap{
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 2;
    background-color: red;
}

#front {
    display: block;
}
<!DOCTYPE html>
<html lang="en-US">
    <head>    
        <meta charset="UTF-8">    
        <title>Photography</title>    
        <link rel="stylesheet" type="text/css" href="./styles.css">    
    </head>
    <body>    
    <div id="header">
    </div>    
        <div id="wrap">   
            <div id="container">
                <div id="controllers">
                    <div id="previous" class="buttons">
                        <p id="try" onclick="change(-1);">PREVIOUS</p>
                    </div>
                    <div id="next" class="buttons">
                        <p id="try2" onclick="change(1);">NEXT</p>
                    </div>   
                </div>  
                <div id="imagewrap">
                    <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
                </div>    
                <div>
                    <p id="tag">Text</p>
                </div>    
            </div>   
        </div>   
    <div id="footer">
    </div> 
        <script type="text/javascript" src="JavaScript2.js"></script>    
    </body>

    </html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download