100% height issues

[shifty_uk]

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

<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

.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?

 

[shifty_uk]

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:

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

 

[shifty_uk]

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