100% height issues

shifty_uk · 9 Mar 2013 at 16:49

Knew there would come a time when I ran into an issue trying to get a div to span full height!

Here's a basic example of what I have/am trying to achieve:

Mark-up

Code:

<div class="main-container">
 <div class="movement-container">

  <!--Start Slider -->
   <section class="slider_holder">          
     <div class="slider">
      <div class="slides_container">
        	<ul class="slides">                
			<li>Content</li>
                        <li>Content</li>

Stylesheet

Code:

.main-container {float: left; width: 100%; height: 100%;}
.movement-container {margin: 0 auto; width: 60%; height: 100%; position: relative;}

.slider {float: left; width: 100%; height: 100%;}
.slides {height:100%; width: 100%; float: left;}
.slides li {width: 100%; height: 100%; float: left;}

Both html/body are set to 100%. It's a vertical slider which slides off the page. Haven't got access to Firebug at the moment to play around with it, unfortunately.

I can't get .slider to span 100%! Any ideas?

Tripnologist · 9 Mar 2013 at 17:34

You need to declare your height on ALL the parent elements of your li, right up to body.

shifty_uk · 9 Mar 2013 at 17:42

Yeah!

Despite the wrapping divs you see in the code above, there's no styles for them, they're just for future use.

If I do this, for example:

Code:

<div style="height: 100%;" class="main-container">
 <div style="height: 100%;" class="movement-container">

  <!--Start Slider -->
   <section style="height: 100%;" class="slider_holder">          
     <div style="height: 100%;" class="slider">
      <div style="height: 100%;" class="slides_container">
        	<ul style="height: 100%;" class="slides">                
			<li style="height: 100%;" >Content</li>
                        <li style="height: 100%;" >Content</li>

It pushes the LI off the page (creating a scrollbar) and breaks the content ie, nothing displays.

Driving me nuts!

Randomface74 · 9 Mar 2013 at 18:10

use a table instead, 100% height on anything else doesn't work reliably

shifty_uk · 9 Mar 2013 at 18:21

I might just do that and find work arounds for the responsive media queries.

Tripnologist · 9 Mar 2013 at 19:11

shifty_uk said:
It pushes the LI off the page (creating a scrollbar) and breaks the content ie, nothing displays. Driving me nuts!

Which scroller are you using? Some need overflow hidden.

ie:
You can see both your li's @ 100%, but stacked on top of each other here.
http://jsfiddle.net/GbNdx/

Same as above, but with overflow hidden.
http://jsfiddle.net/GbNdx/1/

Out of curiosity though, what exactly is it you need to put in a slider @ 100% height? I can't think of many situations where that would be a good idea.