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

Posted by badam
badam
3,740 Points

How can I make my div to dynamic?

Hello guys, I have tried many 'solutions' for this problem, but I couldn't solve this, yet. So I'm trying to do a website just for practice. But I got a problem.

There's: my site: http://i.imgur.com/Hv3IwbY.png

The problem is the following: I have a div (colored with yellow) which will have always another value of height. But under my another div (colored with green) there's a huge white area/space. So as my content div changes I want to make my navigation div to get the FULL HEIGHT as long as reach my footer. How is that possible?

I've got an index.html (Főoldal), a registration button (Regisztráció). My content divs always have the height to the footer. But my navigation div doesn't.

So the question: how could I make my navigation div to have the FULL height as long as it reaches my footer.

I hope I write it understandably.

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Do both the yellow and green(navigation) div's share the same container, and did you try giving your navigation div height: 100%; ?

If that's not it, it might help if you posted your HTML and CSS code.

badam
badam
3,740 Points

I tried but is still takes just as long as it needs.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> <title>Bolt</title> </head> <body> <div>

    <header>

        <h1>Bolt</h1>
    </header>
    <div class="nav"> <!--Menüpontok-->
        <ul>
            <a href="index.html"><li><img src="icon_fooldal_k.png">Főoldal</img></li></a></br>
                <hr>
            <a href="regisztracio.php"><li><img src="icon_reg_k.png">Regisztráció</img></li></a></br>
                <hr>
            <a href="termekfelvitel2.php"><li><img src="icon_felvi_k.png">Termék felvitel</img></li></a>
                <hr>
        </ul>
    </div>

    <div class="content"> <!-- Tartalom -->
    </div>

    <footer>
        <h2>Fejlesztette: Borda Ádám<sup>&copy;</sup></h2>
    </footer>
</div>

</body> </html>

badam
badam
3,740 Points
badam
badam
3,740 Points

header { background: purple; height: 230px; background: linear-gradient(#95689A, #D9D4DE); //background: linear-gradient(#95689A, transparent 130%), #95689A url(igen.jpg) no-repeat center; //background-size: cover; border-bottom: 3px solid #95689A;

}

h1 { font-size: 600%; font-weight: bold; color: white; text-align: center; }

h2 { font-size: 80%; text-align: center; margin-top: 55px; font-style: italic; }

.nav { background: #D9D4DE; display: block; float: left; width: 20%; height: 100%; border-bottom: 3px solid #95689A; border-top: 3px solid #95689A; border-right: 3px solid #95689A; }

ul li { margin-top: 15px; margin-left: 20px; display: inline-block;

}

hr { width: 99%; }

img { margin-right: 5px; }

.content { background: purple; display: block; float: left; //width: 74.702%; width: 75.05%; height: auto; padding-left: 30px; padding-right: 30px; padding-top: 30px; border-bottom: 3px solid #95689A; border-top: 3px solid #95689A; border-right: 3px solid #95689A; display: auto; }

footer { background: #95689A; display: block; float: left; width: 100%; height: 75px; border-top: 6px solid purple; //position: fixed; bottom: 0; }

a { text-decoration: none; color: #95689A; font-weight: bold; }

a:hover { color: purple; font-size: 130%; }