Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Ebrahim Haji
Ebrahim Haji
6,712 Points
Posted by Ebrahim Haji
Ebrahim Haji
6,712 Points

Cant set height of the body to 100%?

the body doesn't take up the whole page

<!DOCTYPE html>


<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
        <header>
                <div class="main-head">
                    <div class="logo">Pratice</div> 
                    <div class="main-nav">
                        Home
                    </div>
                    <div class="main-nav">
                        Water
                    </div>
                    <div class="main-nav">
                        Fire
                    </div>
                </div>  
        </header>   
        <div class="main-body">
                <div class="col">
                    <p>Learning</p>
                    <img src="sky.jpg">
                    <img src="sky.jpg">
                    <img src="sky.jpg">
                </div>
                <div class="col">
                    <p>Learning</p>
                    <img src="tiger.jpg">
                    <img src="sky.jpg">
                    <img src="sky.jpg">
                </div>
                <div class="col">
                    <p>Learning</p>
                    <img src="water.jpg">
                    <img src="sky.jpg">
                    <img src="sky.jpg">
                </div>
        </div>
        <footer class="main-footer">
            <p>I am Practing</p>
        </footer>
</body>

* {
    box-sizing: border-box;
}

 html, body {
    height: 100%;
}

/*=====================Header=====================*/

.main-head 
{

    display: flex;
    background-color: lightgreen;
    min-height: 150px;
    align-items: center;


}

.main-head .logo,
.main-head .main-nav {
    font-weight: bold;
    padding: 10px;
    min-width: 5%;
    text-align: center;
    flex-grow:1;
    border-radius: 10%;


}

.main-head .logo {
    background: orange;
    margin-right: 50%;
    margin-left: 1%;
    flex-grow: 2;
    transition: .5s;    

}

.main-head .logo:hover {
    /*transform: scale(1.5);*/
    flex-grow: 25;
}

.main-nav {
    min-width: 10%;
    margin-right: 1%;
    background: lightblue;
    transition: 1s;
}

.main-nav:hover {
    flex-grow: 2;
}




/* ===================Columns===============*/


.main-body {
    display: flex;
    overflow: hidden;

}


.col {
    font-weight: bold;
    align-items: stretch;
    flex: 1;
    padding: 1%;


}


.col:nth-child(1){
    background-color: green;


}


.col:nth-child(2)
 {
    background-color: lightblue;
}

.col:nth-child(3) {
    background-color: red;
}


/* ===================footer===============*/

.main-footer {
    text-align: center;
    padding: 20px;
    background-color: lightgrey;
    width: 100%;
}
Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points

Try: html{ height: 100%; } body { min-height: 100%; } Or maybe there is some margin being applied to body. Try removing all margin form the body. Like this:

html, body { margin: 0; height: 100%; }

Ebrahim Haji
Ebrahim Haji
6,712 Points
Ebrahim Haji
Ebrahim Haji
6,712 Points

normalized.css is applied

Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points

Providing your html can help.

Yaroslav Kleshchev
Yaroslav Kleshchev
8,744 Points

The body element is taking up 100% of the screen. Setting the background color to black will show this. If you want all your content to fill up the page, you need to adjust the height of your elements. Also you need to wrap all your html in a html tag. There is no html tag in your html file.

2 Answers

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Do you have enough content to fill the 100% of the height?

Ebrahim Haji
Ebrahim Haji
6,712 Points
Ebrahim Haji
Ebrahim Haji
6,712 Points

I added more content so it did kinda fill up the space. But how would I set the height to 100%?

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Hey!

You have to set the html and body height to 100% and then, say you want to make a landing full page, you have to create a div with height or min-height of 100%, so you have something that fills all the body.

Ebrahim Haji
Ebrahim Haji
6,712 Points
Ebrahim Haji
Ebrahim Haji
6,712 Points

Thanks for the answers. After experimenting a bit, I realized that the flex box requires content to make it expand or you could set the height of the flex-box in pixels.