Why doesn't height: 100% work to expand divs to the screen height?

Question

I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Here's a simple and clear explanation: http://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Aug 27 '15 at 23:39
probably best solution for nested elements that should not stretch to entire window's height https://stackoverflow.com/questions/7049875/height-100-not-working/17198266#17198266 — B-GangsteR, Dec 05 '17 at 15:13
Does this answer your question? [Percentage Height HTML 5/CSS](https://stackoverflow.com/questions/1622027/percentage-height-html-5-css) — the Hutt, Nov 19 '21 at 16:39
Am I the only one that notices the css posted is not valid? height: 100%: margin: auto; is not valid. The colon after 100% should be a semi-colon. Regardless, yes, for a percentage to work, it needs to know what it is a percentage of. I would use viewport heights. Like 100vh; — Thomas Fitzgerald, May 23 '22 at 16:51
In Tailwind you can set `h-screen`, which means in css `height: 100vh;` — onmyway133, Aug 22 '23 at 20:32

Madara's Ghost · Accepted Answer · 2014-09-19T18:27:52.867

572

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

JsFiddle example.

edited Sep 19 '14 at 18:27

answered Aug 13 '11 at 10:34

Madara's Ghost

172,118
50
264
308

39

Ok, so this might make me look incredibly stupid, but _whatever_: Do you mean to say that `` is an _actual_ element - just like `
` or ``? I thought the only purpose of `` was to define the beginning and end of an HTML document. I mean, I thought that it was there, not for layout, but just so the browser knows whar type of document it is looking at? I am completely mind-blown.
– jay_t55 May 17 '13 at 03:34
40

@Joey: HTML *is* an actual element. You can style it with CSS, hook events to it in JavaScript, add classes and IDs to it, and it appears in the DOM. The browser will assume an HTML document even without the `` tag, and even without the `` or `` elements. HTML specs however, deem the `` tag mandatory. In short, yes, it is a full-fledged element like all other HTML elements. – Madara's Ghost May 17 '13 at 08:52
3

@SecondRikudo: No, the `` tag is optional according to the specs (e.g. HTML4 and HTML5). And yes, the element is created anyway. – Robert Siemer Jul 15 '14 at 12:08
@Robert is correct; the `` start and end tags are only required in XHTML, where you have to specify all the things. – BoltClock Jul 26 '14 at 04:41
3

hmmm... for me, the only way this worked was to set both `html` and `body` as `height: 100%` (As well as of course the specific `div` I want to inherit the 100% height) – james Jan 13 '15 at 06:34
1

@james Yes, all parents must have a known height. – Madara's Ghost Jan 13 '15 at 06:54
This has saved me from desperation. – Tony Ngomana Oct 25 '20 at 13:00
1

To clear up some confusion: the _markup_ for ``, ``, and `` are optional in an HTML file, but the _elements_ will always get built. When a DOM gets constructed, by definition there will _always_ be an `html`, `head`, and `body` element, which also by definition are always ordered as `html[head,body]`. As such, even if you don't write any _markup_ using ` ...`, any CSS or JS you write involving the `html` _element_ will work because the element is guaranteed to exist in your DOM. – Mike 'Pomax' Kamermans Feb 19 '21 at 20:24
@Madara'sGhost Source? – OTheDev Oct 27 '22 at 09:56

score 216 · Answer 2 · edited Jun 20 '20 at 09:12

216

_{Since nobody has mentioned this..}

Modern Approach:

As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

In this instance, you could use the value 100vh (which is the height of the viewport) - (example)

body {
    height: 100vh;
}

Setting a min-height also works. (example)

body {
    min-height: 100vh;
}

These units are supported in most modern browsers - support can be found here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 24 '15 at 01:14

Josh Crozier

233,099
56
391
304

1

I don't see any benefit to this at all. Doesn't it create extra work for the browser which needs to calculate everything related to the browser viewport? Viewport sizing only seems beneficial when you want to actually size something related to the browser height. – Robert Went Jan 08 '16 at 14:17
19

@RobertWent There are benefits. For instance, `height: 100%` only works if the parent element has a defined height. There are certainly some cases where an element's parent doesn't have a defined height and viewport percentage units resolve that. In other words, if you had a deeply nested element, you could simply set `100vh`, and it would have a height of `100%` of the browser. *You* may not see any benefits, but I have been in numerous cases where they were the only solution. These units may not be as beneficial for root elements such as `html`/`body`, but nonetheless, this is an alternative – Josh Crozier Jan 08 '16 at 14:33
2

But we are talking about the body element, not a deeply nested element. There is only one possible parent, the html element. This is why I mentioned that I see no benefit and it is possibly worse than just setting 100%. Your comment says nothing to make me thin otherwise. Just because something is new doesn't make it better. It is however, an alternative. – Robert Went Jan 08 '16 at 21:37
1

Definition of `viewport-percentage lengths` is misleading. For real, it is just size of viewport i.e. browser's window in most cases. – B-GangsteR Nov 17 '17 at 22:46
4

An issue with this approach is that iPhones excludes the address bar and bottom navigation from the view height, which means `body { height: 100vh }` will have a scroll bar on initial page load. – bholtbholt Feb 08 '18 at 21:08
2

Nice. I tried the other approach, I put `height: 100% !important" to each parent til `html` without success, I could see in the dom that every node of the tree was actually `100%` but I couldn't manage to set the 100% in the desired element, but with the viewport style was easy – pmiranda Sep 12 '19 at 20:04
1

This answer saved my hell lot of time, thank you so much. – blueseal Apr 23 '20 at 11:57
1

This is the perfect answer! – Pamela Sillah May 13 '21 at 18:28
I used the "height:100vh" only on element and it works great. only solution that works.ty – gen Dec 10 '21 at 13:34
Unfortunately `height:100vh` breaks on Safari – KVM Feb 01 '22 at 10:09
This solution creates a scrollbar on mobile, unfortunately making the old approach necessary. – KaKi87 Aug 21 '23 at 16:46

score 30 · Answer 3 · answered Aug 13 '11 at 10:25

30

You will also need to set 100% height on the html element:

html { height:100%; }

answered Aug 13 '11 at 10:25

shanethehat

15,460
11
57
87

score 29 · Answer 4 · answered Jun 19 '13 at 18:08

29

Alternatively, if you use position: absolute then height: 100% will work just fine.

answered Jun 19 '13 at 18:08

Steve Tauber

9,551
5
42
46

10

Would be a great fix if I weren't using flexbox to create my layout. :/ – Parzi Apr 20 '17 at 23:12
3

Don't forget to set `width:100%;` and the parent `position:relative;`. – Avatar May 18 '18 at 21:01

Bengi Besçeli · Answer 5 · 2018-05-31T22:27:33.657

11

You should try with the parent elements;

html, body, form, main {
    height: 100%;
}

Then this will be enough :

#s7 {
   height: 100%;
}

edited May 31 '18 at 22:27

answered May 20 '15 at 21:13

Bengi Besçeli

3,638
12
53
87

score 6 · Answer 6 · answered Jul 19 '12 at 08:54

if you want, for example, a left column (height 100%) and the content (height auto) you can use absolute :

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

in html :

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

score 2 · Answer 7 · answered Aug 13 '14 at 17:25

2

If you absolutely position the elements inside the div, you can set the padding top and bottom to 50%.

So something like this:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

answered Aug 13 '14 at 17:25

Keith Brown

21
1

1

I don't see how this could work since the 50% is relative to the width not the height of the containing element, or am I missing something here? – DrLightman Oct 17 '17 at 12:40

score 2 · Answer 8 · answered May 28 '20 at 19:37

Here's another solution for people who don't want to use html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

score 2 · Answer 9 · answered Oct 06 '22 at 04:50

2

Just use this in your css

html, body {
   height: 100%;
}

You'll be able to see 100% height for all sub classes.

answered Oct 06 '22 at 04:50

Pratik Kabade

33
4

score 1 · Answer 10 · answered Apr 18 '13 at 18:42

1

This may not be ideal but you can allways do it with javascript. Or in my case jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

answered Apr 18 '13 at 18:42

oBo

992
2
13
28

7

Never a good idea to use javascript when css alone will suffice. – Bosworth99 Aug 13 '14 at 17:41
2

Why even do something like this and complicate it more than it should be? I don't understand some answers lol... – Feb 02 '18 at 23:24

score 1 · Answer 11 · answered Aug 13 '11 at 10:31

1

In the page source I see the following:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

If you put the height value in the tag, it will use this instead of the height defined in the css file.

answered Aug 13 '11 at 10:31

Steven

2,437
5
32
36

That's odd because this is what I see in the page source :

– Earl Larson Aug 13 '11 at 10:35
Ok, while I don't know how you got your above code, I went in and changed
to
and it worked. Perhaps it's hiding something from me? Either way thankyou :)
– Earl Larson Aug 13 '11 at 10:41

score 0 · Answer 12 · answered Dec 03 '20 at 21:31

0

Try to play around also with the calc and overflow functions

.myClassName {
    overflow: auto;
    height: calc(100% - 1.5em);
}

answered Dec 03 '20 at 21:31

BirukTes

45
10

Why doesn't height: 100% work to expand divs to the screen height?

12 Answers12

Modern Approach:

Linked

Related