0

How do you fill the height when the website is zoomed 100%? When zoomed out i don't want the element to keep filling the screen. To be more clear, when a user enters the website and the website is zoomed by the default 100% the whole screen should be filled with a color. But when the user scrolls down or zooms the fill should not dynamically change its height.

From comments i edit the code to get a better result, but now there is gaps around the element:

header.mainHeader {
    background-color: #282828;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}
user6395724
  • 89
  • 2
  • 7
  • 2
    At first glance, it's because you've got it `position: fixed`, therefore the div is always at the same position, regardless of scrolling. I would remove it and subsequent `left` and `top` declarations. Off the top of my head - if you want the initial size to fill the viewport, you could always try using `100vh` as the `height`. – Geoff James Aug 28 '16 at 11:28
  • When i remove position:fixed i get white gaps around the element.. – user6395724 Aug 28 '16 at 12:07
  • It's *possibly* to do with the padding/margin on the `body` or another element. **1)** You could set it/them to `0` or **2)** You could apply `box-sizing: border-box` to the *I think, not sure what your CSS is...* `body`- better still, you can apply it to everything (`*` in CSS )- makes it a lot easier in the long-run. FWIW: Setting `border-box` will let the box-model include measurements content, padding and border, but not the margin. At present, it is likely that you're not using this, and it's not taking the `padding` of your body, or another element into account :) – Geoff James Aug 28 '16 at 12:15
  • FYI - had to delete last comment (couldn't edit it) - had some better information to put, see above – Geoff James Aug 28 '16 at 12:16
  • I added box-sizing:border-box but it does not make any difference, see my edited answer – user6395724 Aug 28 '16 at 12:46
  • That's because you're applying it to only the element itself. You need to apply it to its parent e.g. `body` or `*` – Geoff James Aug 28 '16 at 12:57
  • I did it now, but nothing changed. Instead i added margin 0 to the body and now it looks like i want. – user6395724 Aug 28 '16 at 13:06
  • 1
    Cool. Glad to have helped. I'll post an answer for you when I get to a computer – Geoff James Aug 28 '16 at 13:14
  • I've added an answer, below. My apologies with the `border-box` confusion - complete duhh on my part - I've confused it with other similar questions/answers, when setting `width`s of elements and they've ended up with whitespace. Completely irrelevant in this instance, disregard previous comments about it. – Geoff James Aug 28 '16 at 13:47

1 Answers1

1

First, you're setting the position: fixed of the .mainHeader class. This causes the element to always be at the same position in the viewport, regardless of zoom-level or scrolling position.

Remove this position: fixed, and its corresponding top and left properties.

You're currently setting the height to 100% of its parent element, so it would always be as big as that.

To set the height using the viewport's (visible page area) height, you can use vh units, equivalent to percentage of the viewport height (vh) - likewise for width and vw.

So, to set the height of the element to 100% of the viewport height, you can simply do:

height: 100vh;

EDIT - NOTE: the vh unit isn't supported by all browsers (I've found some, trust me). So I would recommend setting a fallback value, above the vh one, to prevent incompatibility. For example:

height: 500px; // fallback value if browser doesn't support vh
height: 100vh; // this value overrides the above one, if the browser supports vh

You might then need to remove padding and/or margin from the body or other elements, if you're seeing whitespace around the element. Have a play about to get the right effect.

For example:

body {
  padding: 0;
  margin: 0;
  ... other properties
}

Please find a JSFiddle of this in action: https://jsfiddle.net/s49p6Laj/

Sample code:

HTML

<div class="header">
  I fill the viewport!
</div>
<div class="other-stuff">
  // All your other content here...
</div>

CSS

// Set the body's margin and padding to 0
body {
  margin: 0;
  padding: 0;
}

// Make the container fill the viewport
.header{
  width: 100%;
  height: 100vh;
Geoff James
  • 3,122
  • 1
  • 17
  • 36
  • Superb answer! Just a small question, what do i do if i want to center the "I fill the viewport!" text vertically (when window is 100% zoomed)? – user6395724 Aug 28 '16 at 14:01
  • It's a bit long to put in a comment, and not in scope to add to my answer, so here's another question (to save you asking one) that answers this in very good detail: http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css – Geoff James Aug 28 '16 at 14:04