CODEWITHSUNDEEP
htmlcssheight
Earl Larson
Earl Larson

Reputation: 5299

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

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

Upvotes: 465

Views: 741582

Answers (12)

Pratik Kabade
Pratik Kabade

Reputation: 69

Just use this in your css

html, body {
   height: 100%;
}

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

Upvotes: 2

BirukTes
BirukTes

Reputation: 45

Try to play around also with the calc and overflow functions

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

Upvotes: 0

TheMisir
TheMisir

Reputation: 4279

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>

Upvotes: 1

Bengi Besceli
Bengi Besceli

Reputation: 3748

You should try with the parent elements;

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

Then this will be enough :

#s7 {
   height: 100%;
}

Upvotes: 11

Josh Crozier
Josh Crozier

Reputation: 240878

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.

Upvotes: 223

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

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.

Upvotes: 593

Keith Brown
Keith Brown

Reputation: 21

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

Upvotes: 2

Steve Tauber
Steve Tauber

Reputation: 10159

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

Upvotes: 29

oBo
oBo

Reputation: 992

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>

Upvotes: 1

YellowMart
YellowMart

Reputation: 221

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>

Upvotes: 6

Steven
Steven

Reputation: 2477

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.

Upvotes: 2

shanethehat
shanethehat

Reputation: 15570

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

html { height:100%; }

Upvotes: 30

Related Questions