CODEWITHSUNDEEP
javascripthtmlcss
user16829687
user16829687

Reputation: 23

Is my content to big or why is it, that I can scroll down?

So, my problem i have with my little project is, that i can already scroll down and don't know why. My goal is, to get the left menu at a 100% height of the body, minus the height of the header so it isn't scrollable anymore.

I can't seem to find a solution on how to fix it. I already tried to play around with boxsizing but wasn't successful at all. What is the problem here?

I assume that I'm somehow confused about sizes in general but a little help and explanation would be appreciated!

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: auto;
    background-color: #444444;
}


header {
    color: white;
    background-color: #171717;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

/* Hintergrund des Menüs */
.courses { 
    width: 350px;
    height: 100%;
    margin: 0;
    background-color: #DA0037;
}

/* Alle h2, deren parent nav ist */
nav > h2 { 
    font-family: Arial, Helvetica, sans-serif;
    color: #EDEDED;
    padding: 20px 30px;
}

 /* Alle Listenelemente */
.courses nav ul li{
    list-style-type: none;
    padding: 20px 50px;
}

/* Erste Element der liste (Überschrift des Menüs) */
.courses li:first-of-type { 
    padding: 0 50px 20px;
}

/* Alle Links, die ein Listenelement sind */
.courses nav ul li a {
    text-decoration: none;
    color: #EDEDED;
}
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>LernSeite</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <h1>Lernseite</h1>
        </header>

    <div class="courses">
        <nav>
            <h2>Alle Kurse</h2>
            <ul>
                <li><a href="#">Einführung in die Programmierung</a></li>
                <li><a href="#">Analysis 1 und Lineare Algebra (Ana1LinA)</a></li>
                <li><a href="#">Verteilte Netze und Rechnersysteme</a></li>
                <li><a href="#">Systemprogrammierung</a></li>
            </ul>
        </nav>
    </div>

    </body>
</html>

Upvotes: 0

Views: 36

Answers (1)

Spectric
Spectric

Reputation: 32002

You can use the CSS calc() function to subtract the height of the header from 100% of the screen height, so as not to cause a scrollbar. The height of .courses would then be calc(100% - 90px).

Also, your left menu is 100% the height of the body; the content is just overflowing. You can fix this by applying overflow-y:auto to it. If you don't want the scrollbar, you can set overflow to hidden.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: auto;
    background-color: #444444;
}


header {
    color: white;
    background-color: #171717;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

/* Hintergrund des Menüs */
.courses { 
    width: 350px;
    height: calc(100% - 90px);
    margin: 0;
    background-color: #DA0037;
}

/* Alle h2, deren parent nav ist */
nav > h2 { 
    font-family: Arial, Helvetica, sans-serif;
    color: #EDEDED;
    padding: 20px 30px;
}

 /* Alle Listenelemente */
.courses nav ul li{
    list-style-type: none;
    padding: 20px 50px;
}

/* Erste Element der liste (Überschrift des Menüs) */
.courses li:first-of-type { 
    padding: 0 50px 20px;
}

/* Alle Links, die ein Listenelement sind */
.courses nav ul li a {
    text-decoration: none;
    color: #EDEDED;
}

.courses{
  overflow-y:auto;
}
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>LernSeite</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <h1>Lernseite</h1>
        </header>

    <div class="courses">
        <nav>
            <h2>Alle Kurse</h2>
            <ul>
                <li><a href="#">Einführung in die Programmierung</a></li>
                <li><a href="#">Analysis 1 und Lineare Algebra (Ana1LinA)</a></li>
                <li><a href="#">Verteilte Netze und Rechnersysteme</a></li>
                <li><a href="#">Systemprogrammierung</a></li>
            </ul>
        </nav>
    </div>

    </body>
</html>

Upvotes: 1

Related Questions