CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
lzc
lzc

Reputation: 1705

Responsive div height relative to a fixed HTML body height

Since most browser windows are different size depending on screen, I am trying to allow the webpage to have no scroll, while fitting the full content of the page into one browser page. My body has the following style:

<body style="overflow:hidden;height:100%">

I would like to have two <div>'s stacked on top of each other. One takes up 60% of the height, and the other takes up 40% while staying fixed to cover the entire browser view port. Is this possible?

I am currently hard coding heights for my <div>, I just realized that this, may be right for my browser, but someone else will not be able to see the same thing.

Would dynamically setting the css classes for my two <div> in JS according to the height of their browser.be a good solution to this?

I know this may bring in another issue with the contents of my divs being squeezed or expanded in a weird way but I think I can deal with that later.

Upvotes: 1

Views: 2763

Answers (4)

David Taiaroa
David Taiaroa

Reputation: 25495

Here is another possibility :
http://codepen.io/panchroma/pen/ZYwXLP

In your case I think using vh as I've done here, or flexbox have a lot to recommend them, you'll end up with nice clean code.

HTML 

<div class="top">top div</div>
<div class="bottom">bottom div</div>

CSS 

.top{
  height:60vh;
}

.bottom{
  height:40vh;
}

Good luck!

Upvotes: 1

iSchluff
iSchluff

Reputation: 465

If you don't want the fancy vh and vw stuff this will still suffice:

html, body{
  height: 100%;
}
body{
  overflow: hidden;
}
.foo{
  height: 60%;
  background: #369;
}
.bar{
  height: 40%;
  background: #693;
}
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="foo"></div>
    <div class="bar"></div>
  </body>
</html>

Upvotes: 1

Terry
Terry

Reputation: 66173

If you are supporting quite modern browsers (≥IE9, Firefox, Chrome, Safari, Opera), you can always use the viewport measurement units: vh and vw :) 

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 100%;
  /* or 100vw, that's the same */
  height: 100vh;
}
.h60 {
  background-color: #eee;
  height: 60vh;
}
.h40 {
  background-color: #333;
  height: 40vh;
}

/* Unrelated styles, for display purposes only */
.wrapper > div {
  display: flex;
  font-family: Helvetica, Arial, sans-serif;
  align-items: center;
  justify-content: center;
}
p {
  margin: 0;
}
.wrapper > div:last-child {
  color: #eee;
}
<section class="wrapper">
  <div class="h60">
    <p>I have a height that is 60% of the viewport.</p>
  </div>
  <div class="h40">
    <p>I have a height that is 40% of the viewport.</p>
  </div>
</section>

The only hitch is that vh calculations are buggy in iOS7, so you might want to use specific @media queries to manually set heights for iOS7 Safari users.

Upvotes: 1

Dan Blows
Dan Blows

Reputation: 21184

If you want to dynamically set the height of divs based on the height of the viewport, then typically JavaScript is your best option.

Before showing any content, calculate the height of the window, set the heights of what you need, and then make the content visible.

On a side note, personally speaking I don't like this style of website. I think it's only useful in app-style websites, it needs a lot of usability testing because it breaks standard browser behaviour, and it needs a lot of cross-browser testing because you end up in using a lot of custom code. </rant>

Upvotes: 1

Related Questions