CODEWITHSUNDEEP
htmlcsssassheight
janisch
janisch

Reputation: 166

Assign divs be exactly 100% height

My problem is the following: I have a website with a header, left navigation and a footer (not in the code right now). The header and the left navigation have to be static and only the rest of the page should move, that's why I started with making my left navigation menu 100% width. But height: 100%, doesn't seem to be working.

Could someone give me a tip or maybe anybody knows why I have this problem?

Here is a link to a sceenshot with my idea how the page should look

edit: that space under the footer and the left navigation shouldn't be there. That was a fail from when I took the screenshot.

Code: (index.php)

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="design.css">
    <title>Hardvision</title>
    <script src="https://kit.fontawesome.com/743ddd1f40.js" crossorigin="anonymous"></script>
</head>

<body>
<div class="wrapper">
<header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-2 logo">
                <a href="index.php"><img src="logo2.png" height="90px" width="90px"></a>
            </div>
            <nav class=" col-9 px-0">
                <div class="mainnav">
                    <ul class="px-0">
                        <li>
                            <a class="li" href="#">Lorem ipsum</a>
                        </li>
                        <li>
                            <a class="li" href="#">Lorem ipsum</a>
                        </li>

                        <li>
                            <a class="act" href="#">Lorem ipsum</a>
                        </li>


                        <li>
                            <a class="li" href="#"><i class="fas fa-user fa-lg"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>
<hr>


<main>
        <div class="leftnav">
            <nav>
                <div class="leftnavtable">
                    <li>
                        <p>Lorem ipsum</p>
                    </li>
                    <li>
                        <p>Lorem ipsum</p>
                    </li>
                    <li>
                        <p>Lorem ipsum</p>
                    </li>
                </div>
            </nav>
        </div>

    <div class="fullheight">
        <p>Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
    </div>

</main>

<footer>

</footer>

</div>
</body>

</html>

Code: (design.scss)

//variables
$defaultfont: Arial, sans-serif;
$defaultfontsize: 16px;
$gray1: #A9A9A9;
$gray2: #DDDDDD;
$break_small: 900px;
$break_large: 1170px;
$headerheight: 110px;

//general
html {
  font-size: $defaultfontsize;
  font-family: $defaultfont;
}

//tags
header {
  background-color: $gray1;
}

hr {
  border: none;
  height: 1px;
  background-color: #333;
  margin: 0px;
}

a {
  color: black;
}

//logo positioning
.container-fluid {
  .row {
    height: $headerheight;
  }
  .logo {
    padding: 10px 0px 0px 100px;
    @media screen and (max-width: $break_large) {
      padding: 10px 0px 0px 50px;
    }
    @media screen and (max-width: $break_small) {
      padding: 10px 0px 0px 40px;
    }
  }
}

//Header navigation
.mainnav {
  ul, li {
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: flex-end;
    height: 70px;
  }
}

//whole page height exactly 100%
html, body, main, .leftnav, .leftnavtable, .fullheight {
  height: 100%;
  margin: 0;
  overflow: auto;
}

//Left navigation container
.leftnav {
  padding: 0;
  background-color: $gray2;
  display: flex;
  flex-flow: column;
  width: 250px;
  float: left;
}

//Left navigation
.leftnavtable {
  width: 250px;

  ul, li {
    list-style: none;
    padding: 40px 0px 0px 35px;
  }
}

//Text area
main .leftnav {
  float: left;
}

Upvotes: 1

Views: 106

Answers (4)

Aman
Aman

Reputation: 1550

You need to set height in "vh" instead of "%".

But you also need to calculate the height.. see example below

height: calc(100vh - height of header); If header height = 100px;

.leftnav {
    height: calc(100vh - 100px);
}

Upvotes: 2

Sushmita Parajuli
Sushmita Parajuli

Reputation: 43

Assuming height of navbar 70px and footer 100px and assuming width of sidebar 250px 

.fullheight {
    height: calc(100vh -170px);
    width: calc(100vh - 250px);
    overflow:auto
}

Upvotes: 2

Mahadi Matsawily
Mahadi Matsawily

Reputation: 19

Use vertical height

.leftnav {
    padding: 0;
    background-color: $gray2;
    display: flex;
    flex-flow: column;
    width: 250px;
    float: left;
    height: 100vh;
}

Upvotes: 1

Arno Tenkink
Arno Tenkink

Reputation: 1528

Also good to know, building layouts with flexbox CSS gives you some more freedom to play with elements shrinking and growing automatically instead of defining the height and width of the elements.

This can help you in the future to make better decision on to how to structure your HTML templates.

I coded you a quick example provided with your screenshot.

Learn more about flexbox here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

header {
  height: 80px;
  background-color: grey;
}

.content-wrapper {
  display: flex;
  background-color: blue;
}

nav {
  background-color: aqua;
  min-width: 180px;
}

footer {
  background-color: red;
  padding: 20px;
}


/* misc styling */

header {
  padding: 20px;
}

header ul {
  list-style: none;
}

header ul li {
  display: inline;
  padding: 5px;
}

nav ul li {
  padding: 5px 0;
}

main section {
  padding: 20px;
}

p {
  margin: 0;
}
<header>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
</header>
<div class="content-wrapper">
  <nav>
    <ul>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
      <li>Hello world</li>
    </ul>
  </nav>
  <main>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tellus et leo lacinia facilisis nec nec ante. Maecenas sed purus dictum, dignissim ex sit amet, pretium augue. Sed sed diam felis. Aliquam facilisis non nunc ac mattis. In eget
        magna ut mauris maximus tincidunt nec ac orci. Sed bibendum mauris erat, nec efficitur tortor aliquet non. Nulla facilisis velit nec nunc tincidunt aliquam. Phasellus et nisl sit amet lorem sodales volutpat. Vivamus mattis justo eu nulla tincidunt
        porta. Pellentesque sed urna finibus, vehicula nunc a, vehicula dui. Ut finibus lectus sed odio faucibus dignissim. Nullam egestas posuere porta. Morbi ac tellus imperdiet, fringilla ex a, tincidunt lacus. Nulla facilisi. Vestibulum ante ipsum
        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque at eleifend elit, in dignissim arcu. Mauris bibendum semper sagittis. Nullam quis ex sed velit porttitor tincidunt. Class aptent taciti sociosqu ad litora torquent
        per conubia nostra, per inceptos himenaeos. Vestibulum a convallis dolor. Aliquam in pharetra sem. Phasellus lobortis, diam vel convallis suscipit, nulla turpis pretium risus, sed dignissim tellus nunc vel enim. Fusce dignissim ante sit amet pulvinar
        gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In congue mattis fermentum. Duis blandit ornare egestas. Cras at fringilla sem, at aliquet metus. Integer ac lectus sit amet neque efficitur dictum
        in eu urna. Maecenas vulputate nec est vitae blandit. Sed aliquet posuere felis, ut tincidunt magna pharetra non. Maecenas facilisis pretium odio, tincidunt porttitor mauris feugiat vitae. Duis blandit quam non magna maximus dignissim non in tellus.
        Nam ligula leo, varius iaculis commodo sed, vestibulum sit amet orci. Etiam quis quam eros. In scelerisque vitae risus sed egestas. Proin fermentum venenatis ex et condimentum. Maecenas eu massa ut augue laoreet pharetra at ut mi. Nunc gravida
        est sed nibh eleifend condimentum.</p>
    </section>
    <footer>
      Here should be a Footer.
    </footer>
  </main>

</div>

Upvotes: 1

Related Questions