HTML single page with No scroll

Question

I want to create a webpage. The thing I need is the webpage should be of fixed size based on the user window size, like we don't need to scroll down to see something. I can change it to a particular height, but the thing is when resizing the browser window it again contains the scroll option since the image size

In the above shown figure the first image get oversized, and hence it shows empty space instead of responsive In the second one the user window get reduced in size hence their shows a scrollview , the thing is i want it to get flexible. for varying the window size varies the height of the div instead of showing scrolling options. Can any one help me in this?

thanks for the answers guys!Also answer if In case I want 3 columns of equal width and fixed height with the same no scrolling option

Thanks in advance

Answer 1

You can use the "new" css units vh and vw which are relative to the size of the viewport and it's quite supported right now. Example:

.row {
  height:33.3vh;
}

See this pen that I've made for see it in action.

Answer 2

What you need is the VH (viewport height). There's a fiddle where you can see it working:

.yourdivs{
    height:33vh;
    background-color:red;
    border-bottom:1px solid black;
}

jsFIDDLE

From w3school:

CSS Units

vh: Relative to 1% of the height of the viewport.

Viewport: the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.