Page Height to 100% of Viewport

Page height to 100% of viewport?

I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.

The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.

jQuery

function windowH() {
   var wH = $(window).height();

   $('.sideBar, .mainImg').css({height: wH});
}

windowH();

This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.

I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.

JSFIDDLE (Remove 'show' at the end of the url to see code)

The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.

If you want a pure CSS only approach then you can do something like this,

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

By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.

Refer to this JSFIDDLE to see how it works.

Helpful read about responsive web design

HTML sections 100% height of viewport

NB: vh works only for laptops and bigger screen sizes because for mobile screens which are smaller the vh also takes into account the browser window which shows the website and the items such as the volume, battery, etc above the browser window.

This can be done in CSS alone, no Javascript required.

The correct way is to use the vh and vw units:

vh: 1/100th of the height of the viewport.

vw: 1/100th of the width of the viewport.

As such, giving the element you wish to be 100% as high as the viewport a height setting of 100vh will give you what you're after.

html,
body {
  height: 100%;
  margin: 0;
}
section {
  height: 100vh;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Body not 100% height but 100% Viewport

If you want to make sure your height is at least 100% but then it grows with content, then instead of using height: 100% you should use min-height: 100%.

However, on your example, you may wonder why even if there's no enough content you still get a vertical scroll bar. That's because the h1's margin-top is displacing the parent and making your body not start at the very top but rather at 0.67em (which is the h1's top margin on, for example, Google Chrome's User Agent by default).

There are many ways to solve this. You can:

• add a padding-top: 1px to the .header. If you want to be pixel perfect you can also add margin-top: -1px.
• add overflow: auto to the .header.
• remove the margin-top of the h1 if you don't need it

Here's an implementation that uses min-height: 100% on body and also uses overflow: auto on the .header.
See how the body takes at least 100% of the height of the viewport, or its content's height if it's bigger than 100%. https://jsfiddle.net/nprq5LLo/7/

Viewport height 100% not working on page element

How about setting the .left border to transparent and adding a pseudo element that will serve as a border instead.

.wrapper:after {
  box-sizing: border-box;
  content: " ";
  display: block;
  width: 20%;
  padding: 4% 2%;
  height: 100%;
  text-align: center;
  border-right: 8px solid #60689D;
  position: absolute;
  left: 0;
  z-index:1;
}

See demo

This way regardless which one between .left and .right is longer, the border will always reach the bottom of .wrapper

Keeping a div at full height when it doesn't fit in viewport

Use the min-height property rather than the height property.

When you set height: 100% on the element with the background, it will have a height of 100% of the parent element. Since the parent element's height is equal to the height of the viewport, it won't work as expected. Since you don't want the element's maximum height to be the same as the viewport, a min-height work better.

Updated Example

div {
    position: relative;
    width: 200px;
    min-height: 100%;
    margin: 0 auto;
}

As a side note, you can also use viewport-percentage units:

Example Here

div {
    position: relative;
    width: 200px;
    min-height: 100vh;
    margin: 0 auto;
}

---

Related Topics