Elements collapsing when I change their height to percentage values

Question

I am working on my second project for the web (self taught) and I have a newbie question.

I have a mock up header and footer in my page which have both a height of 100px. I am trying to change this so that the height is in percentages but when I do so they collapse. Why?

Code:

HTML

<!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="jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="JavaScript2b.js"></script>
        <script type="text/javascript" src="JavaScript2.js"></script>
    </head>

    <body>
        <div id="header">
        </div>
        <div id="wrap">
            <div id="container">
                <div id="controllers">
                    <div id="previous" class="buttons" onclick="change(-1);">
                    </div>
                    <div id="next" class="buttons" onclick="change(1);">
                    </div>
                </div>
                <div id="imagewrap">
                    <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
                </div>
                <div>
                    <p id="tag">Poem</p>
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </body>
    <script type="text/javascript" src="JavaScript2.js"></script>
</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 {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

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

#wrap {
    position: relative;
    clear: both;
    padding: 0px;
    width: 100%;
}

#footer {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: lightgray;
    display: block;
}

#container {
    position: relative;
    margin: 15px auto;
}

#controllers {
    position: static;
    height: 20px;
}

#previous {
    position: absolute;
    left: 10px;
    background-image: url(Images/carremoins.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    z-index: 4;

}

#next {
    background-image: url(Images/carreplus.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    z-index: 4;
    background-position: center center;
}

#container:hover .buttons {
/*  display: block;*/
opacity: 1;
}

#tag {
    position: relative;
    height: 40px;
    line-height: 1.7em;
    padding-top: 5px;
    text-align: center;
    font-size: 1.1em;
}


.buttons {
    cursor: pointer;
    top: 50%;
    z-index: 3;
/*  display: none;*/
    opacity: 0;
    transition: opacity .3s ease-in-out;
}


#imagewrap{
    position: relative;
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 2;
    height: 100vh;
}

#front {
    display: block;
}

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;
}

http://stackoverflow.com/a/31728799/3597276 Read this, i think it will help. — Andrii Starusiev, Feb 22 '17 at 10:49
Ok so I have to specifically set the height of the container. But what if I want the container to fill the height of the window (no matter how big or small the window may be) AND the footer to always be say 10% of that height. Is it possible to do this? — Paul, Feb 22 '17 at 10:51
vh - Relative to 1% of the height of the viewport* https://www.w3schools.com/cssref/css_units.asp — Andrii Starusiev, Feb 22 '17 at 11:16

score 0 · Answer 1 · answered Feb 22 '17 at 10:56

0

For the container to fill the height of the screen, you could try this:

html, body {
    height: 100%;
}

answered Feb 22 '17 at 10:56

Carl Binalla

5,393
5
27
46

I have tried this but I still get scroll bars. What is the easiest way to get the body to fill the whole height irrespective of content? – Paul Feb 22 '17 at 10:58
If you get scroll bars, something has a margin. Margins add to the total height. Solution: set `margin: 0`, or use `calc(100% - 16px)` for the height (assuming that the top and bottom margins are 8px each). – Mr Lister Feb 22 '17 at 11:44

score 0 · Answer 2 · answered Feb 22 '17 at 10:57

please try to do this:

#footer {
height: 10vh;
}

10vh = 10% of the viewport's height

besides of directly setting the percentage, you can also do calculations, such as making the height of footer equals to the height of the viewport minus 800px by doing this:

#footer {
height: calc(100vh - 800px);
}

Elements collapsing when I change their height to percentage values

2 Answers2