How to expend a div to alway be 100% of the page?

Question

I want to expand my menu height to always take 100% of the visible height.

For the moment it only take the 100% at the loading, then if I scroll down there is a white block and it's ugly.

I can't post images because I haven't 10points

The CSS of my menu is the following one:

.nav-sm .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 70px;
    padding: 0;
    z-index: 9999;
    position: absolute;
}

The thing I want to achieve is to have my menu who always took all the visible height and I can't find how to do that.

Possible duplicate of [For div to extend full height](http://stackoverflow.com/questions/4535983/for-div-to-extend-full-height) — Topr, Apr 03 '17 at 11:15
set html,body{ height:100%} then .nav-sm .container.body .col-md-3.left_col{ height:100%} — Sahil Dhir, Apr 03 '17 at 11:27

Adnan Özsarigöl · Answer 1 · 2017-04-03T11:19:58.683

0

Try this:

div#navi{
    width:100px;
    height:auto;
    top:0px;
    bottom:0px;
    position:fixed;
    background:maroon;
}

body {
    height:2000px;
    margin: 0px;
    padding: 0px;
}

<div id="navi">
test
</div>

edited Apr 03 '17 at 11:19

answered Apr 03 '17 at 11:15

Adnan Özsarigöl

61
4

I still have the white block – Francis Apr 03 '17 at 11:16
Where do you have a white block? Maybe you need margin:0px; at your body tag?! Refresh my post – Adnan Özsarigöl Apr 03 '17 at 11:18
Between the menu and the footer. I wish that the menu height would be dynamic – Francis Apr 03 '17 at 11:25
How should I know that there is a footer? You don't mentioned anything about a footer. You want to fit 100% of height even if you scroll. That's it. Run the code snippet. Or you must ask your question better. – Adnan Özsarigöl Apr 03 '17 at 11:28
Yes that what I want and the footer has nothing to do in the question because I want 100%, if there is a white block between menu and footer it mean it's not 100% right ? – Francis Apr 03 '17 at 11:31
But why do you have a white block? Is your footer white? Maybe change your z-index? The example works, or not? – Adnan Özsarigöl Apr 03 '17 at 11:33
I don't know why there is a white block that's why I'm looking for CSS to take 100% of the page. Yes your example work in the Fiddle but not in my case – Francis Apr 03 '17 at 11:33
Can you show it in jsfiddle or here? Maybe the problem is at another place. – Adnan Özsarigöl Apr 03 '17 at 11:35

score 0 · Answer 2 · answered Apr 03 '17 at 11:17

Another possibility is to use vh (viewheight) instead of working with percentages:

.nav-sm .container.body .col-md-3.left_col {
    min-height: 100vh;
    width: 70px;
    padding: 0;
    z-index: 9999;
    position: absolute;
    border: 1px solid black;
}

(For reference, check this W3Schools page

Hope this helps

score 0 · Answer 3 · edited Apr 03 '17 at 12:43

0

.demo{
  width:100%;
  height:100%;
  background:#e0e0e0;
}
    
body {
  height:2000px;
  margin:0px;
  padding:0px;
}

<body>
  <div class="demo">
    <span>Hello World</span>
  </div>
</body>

edited Apr 03 '17 at 12:43

Tom

4,257
6
33
49

answered Apr 03 '17 at 11:44

Kiran Kumar

23
6

score 0 · Answer 4 · answered Apr 03 '17 at 12:55

Here's how you can do this.

Set the position of the menu to be fixed and then use height: 100%; to make it full height and not move when the page is scrolled.
Here's the working demo: https://jsfiddle.net/jv8a4hhh/
And the code snippent:

body {
  margin: 0;
  padding: 0;
  height: 1000px;
}

navigation {
  background: #cccccc;
  color: #2e2e2e;
  padding: 10px 10px;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
}

<navigation>
  THIS IS MENU
</navigation>

<content>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>
</content>

Hope this helps :)

How to expend a div to alway be 100% of the page?

4 Answers4