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

Asked 13/8, 2011 at 10:23 Answered 6/10, 2022 at 4:50

451

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">

Arsine answered 13/8, 2011 at 10:23 Comment(5)

Here's a simple and clear explanation: https://mcmap.net/q/36844/-why-is-percentage-height-not-working-on-my-div-duplicate – Redford 27/8, 2015 at 23:39

probably best solution for nested elements that should not stretch to entire window's height https://mcmap.net/q/48477/-why-doesn-39-t-height-100-work-to-expand-divs-to-the-screen-height-duplicate/… – Bloom 5/12, 2017 at 15:13

Does this answer your question? Percentage Height HTML 5/CSS – Loveland 19/11, 2021 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; – Mooncalf 23/5, 2022 at 16:51

In Tailwind you can set h-screen, which means in css height: 100vh; – Laundes 22/8, 2023 at 20:32

579

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.

Damned answered 13/8, 2011 at 10:34 Comment(9)

Ok, so this might make me look incredibly stupid, but whatever: Do you mean to say that <html> is an actual element - just like <p> or <img />? I thought the only purpose of <html> 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. – Jeavons 17/5, 2013 at 3:34

@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 <html> tag, and even without the <head> or <body> elements. HTML specs however, deem the <html> tag mandatory. In short, yes, it is a full-fledged element like all other HTML elements. – Diamine 17/5, 2013 at 8:52

@SecondRikudo: No, the <html> tag is optional according to the specs (e.g. HTML4 and HTML5). And yes, the element is created anyway. – Enclosure 15/7, 2014 at 12:8

@Robert is correct; the <html> start and end tags are only required in XHTML, where you have to specify all the things. – Stoke 26/7, 2014 at 4:41

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) – Hourly 13/1, 2015 at 6:34

@Hourly Yes, all parents must have a known height. – Diamine 13/1, 2015 at 6:54

This has saved me from desperation. – Latrishalatry 25/10, 2020 at 13:0

To clear up some confusion: the markup for <html>, <head>, and <body> 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 <html> ...</html>, any CSS or JS you write involving the html element will work because the element is guaranteed to exist in your DOM. – Tsimshian 19/2, 2021 at 20:24

@Madara'sGhost Source? – Intitule 27/10, 2022 at 9:56

223

_{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.

Flemming answered 24/1, 2015 at 1:14 Comment(12)

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. – Creosol 8/1, 2016 at 14:17

@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 – Flemming 8/1, 2016 at 14:33

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. – Creosol 8/1, 2016 at 21:37

Definition of viewport-percentage lengths is misleading. For real, it is just size of viewport i.e. browser's window in most cases. – Bloom 17/11, 2017 at 22:46

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. – Frosty 8/2, 2018 at 21:8

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 – Fetid 12/9, 2019 at 20:4

This answer saved my hell lot of time, thank you so much. – Gipon 23/4, 2020 at 11:57

This is the perfect answer! – Amling 13/5, 2021 at 18:28

I used the "height:100vh" only on element and it works great. only solution that works.ty – Atterbury 10/12, 2021 at 13:34

Unfortunately height:100vh breaks on Safari – Frederique 1/2, 2022 at 10:9

This solution creates a scrollbar on mobile, unfortunately making the old approach necessary. – Pupil 21/8, 2023 at 16:46

the min-height fixed the issue for me – Dollie 27/10, 2023 at 16:43

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

html { height:100%; }

Sublieutenant answered 13/8, 2011 at 10:25 Comment(0)

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

Lotz answered 19/6, 2013 at 18:8 Comment(2)

Would be a great fix if I weren't using flexbox to create my layout. :/ – Slowly 20/4, 2017 at 23:12

Don't forget to set width:100%; and the parent position:relative;. – Involuted 18/5, 2018 at 21:1

You should try with the parent elements;

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

Then this will be enough :

#s7 {
   height: 100%;
}

Centimeter answered 20/5, 2015 at 21:13 Comment(0)

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>

Maureen answered 19/7, 2012 at 8:54 Comment(0)

Just use this in your css

html, body {
   height: 100%;
}

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

Amphitrite answered 6/10, 2022 at 4:50 Comment(0)

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.

Janayjanaya answered 13/8, 2011 at 10:31 Comment(2)

That's odd because this is what I see in the page source :<div class="holder"> <tr><td> <div id="s7"> <div id="posts"> – Arsine 13/8, 2011 at 10:35

Ok, while I don't know how you got your above code, I went in and changed <div id="s7"> to <div id="s7" style="height:100%;"> and it worked. Perhaps it's hiding something from me? Either way thankyou :) – Arsine 13/8, 2011 at 10:41

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;
}

Ignescent answered 13/8, 2014 at 17:25 Comment(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? – Unpromising 17/10, 2017 at 12:40

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>

Noctiluca answered 28/5, 2020 at 19:37 Comment(0)

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>

Vessel answered 18/4, 2013 at 18:42 Comment(2)

Never a good idea to use javascript when css alone will suffice. – Provender 13/8, 2014 at 17:41

Why even do something like this and complicate it more than it should be? I don't understand some answers lol... – Medicaid 2/2, 2018 at 23:24

Try to play around also with the calc and overflow functions

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

Sebrinasebum answered 3/12, 2020 at 21:31 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Modern Approach:

Recommended topics

Hot tags