Login/Register
Page height to 100% of viewport?
Asked Answered
Solved htmlcssheight
P

4

35

I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.

I'm trying to make a homepage for this website. The design is simply a block down the left-hand side of the page showing the logo at the top and then a series of links underneath, all of which are on the same background. To the right of this is one big image that fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height are both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.

The height is a different story, however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. For the main image, I want to keep the aspect ratio of and just have it overflow its div as required to keep most of it displayed and for the sidebar, I just want to fit to 100% of the page height. Here is my code at present:

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
height: 100%;
margin: 0;
padding: 0;
}

#page 
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}

#mainimg
{
width: 100%;
overflow: hidden;
}

.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00); 
}

@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}

</style>
</head>

<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
    <div class="link" id="homelink">Home<!--Home link--></div>
    <div class="link" id="aboutlink">About<!--About link--></div>
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
    <div class="link" id="priceslink">Prices<!--Prices link--></div>
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
    <div class="link" id="contactlink">Contact<!--Contact link--></div>
    <div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>

Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks

Picrate answered 30/10, 2013 at 21:27 Comment(2)
First thing I can suggest is to remove that style tag and transfer the css to it's own page. If you are going to bring media queries and everything into this equation then you need a separate css page. – Circumferential
so what are all the recommended scrset sizes for all breakpoints of full height including vertical viewport? i know 1600x900 but im having trouble with the verticals – Cumulonimbus
C
27

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

Circumferential answered 30/10, 2013 at 22:43 Comment(2)
No problem! I have never made a layout like this so I figured it could be beneficial for the both of us. You can also set heights like so: var wH = $(window).height()/2; this would be 1/2 the height, var wH = $(window).height()/4; and this would be 1/4 the height. If this answer helped you please don't forget to mark it as the right answer. Best of luck in your design and feel free to ask me any questions! – Circumferential
The 'pure CSS' answer only works for direct descendants of body, if the element's container has a different height (higher than the browser viewport), than setting that element's height to 100% will make it higher than the viewport. The best "pure CSS" approach is to use vh, like in @Arshen's answer below. – Diacritic
P
58

Here’s just a simplified code example of the HTML:

<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>

and here’s the CSS using vh:

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

It works for me.

Pancake answered 19/9, 2014 at 19:43 Comment(1)
This doesn't work for me though as the element is always taller than the actual viewport. See how the button here is not on the bottom line of the black div#welcome even though it's "position: absolute; bottom: 0". Tested with Chrome on both desktop and mobile. Why is that? Until then I'm using the solution with jquery $(window).height(). – Taster
C
27

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

Circumferential answered 30/10, 2013 at 22:43 Comment(2)
No problem! I have never made a layout like this so I figured it could be beneficial for the both of us. You can also set heights like so: var wH = $(window).height()/2; this would be 1/2 the height, var wH = $(window).height()/4; and this would be 1/4 the height. If this answer helped you please don't forget to mark it as the right answer. Best of luck in your design and feel free to ask me any questions! – Circumferential
The 'pure CSS' answer only works for direct descendants of body, if the element's container has a different height (higher than the browser viewport), than setting that element's height to 100% will make it higher than the viewport. The best "pure CSS" approach is to use vh, like in @Arshen's answer below. – Diacritic
A
1

On Chrome, just adding display: flex on the body is enough.

On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.

<body style="display:flex; height: 100vh; margin: 0;">
  <div style="background-color: red; flex:1;"></div>
  <div style="background-color: green; flex:2;"></div>
  <div style="background-color: blue; flex:1;"></div>
</body>
Acyclic answered 2/3, 2019 at 6:26 Comment(0)
P
0

Sample code for exact Covering the page height.

HTML 

<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

CSS 

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.container {
 max-width: 1020px;
 margin: auto;
 height: 100%;
 background: #ddd;
 padding:16px;
 box-sizing:border-box
}
.header,.content{
 background:#fff;
 padding:16px
}
.content{
 margin-top:16px;
 min-height:calc(100% - 160px);
}

Example Link : https://codepen.io/rahdirs/pen/jeRVod

Pietism answered 29/10, 2018 at 10:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.