443

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

5

12 Answers 12

573

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.

9
  • 39
    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.
    – jay_t55
    May 17, 2013 at 3: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 <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. May 17, 2013 at 8:52
  • 3
    @SecondRikudo: No, the <html> tag is optional according to the specs (e.g. HTML4 and HTML5). And yes, the element is created anyway. Jul 15, 2014 at 12:08
  • 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, 2015 at 6:34
  • 1
    @james Yes, all parents must have a known height. Jan 13, 2015 at 6:54
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.

11
  • 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. Jan 8, 2016 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 Jan 8, 2016 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. Jan 8, 2016 at 21:37
  • 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 8, 2018 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, 2019 at 20:04
30

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

html { height:100%; }
0
29

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

2
  • 10
    Would be a great fix if I weren't using flexbox to create my layout. :/
    – Parzi
    Apr 20, 2017 at 23:12
  • 3
    Don't forget to set width:100%; and the parent position:relative;.
    – Avatar
    May 18, 2018 at 21:01
11

You should try with the parent elements;

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

Then this will be enough :

#s7 {
   height: 100%;
}
6

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>
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;
}
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, 2017 at 12:40
2

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>

2

Just use this in your css

html, body {
   height: 100%;
}

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

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.

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"> Aug 13, 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 :) Aug 13, 2011 at 10:41
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>
2
  • 7
    Never a good idea to use javascript when css alone will suffice.
    – Bosworth99
    Aug 13, 2014 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...
    – user5228393
    Feb 2, 2018 at 23:24
0

Try to play around also with the calc and overflow functions

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.