-1

I have a page like this:

<body>
<div class="outerdiv">
<div class="someDiv">
<div class="flexible"></div>
</div>
<div class="someOtherDiv"></div>
</div>
</body>

I need to write css and javascript to make this layout take up 100% of the screen by adjusting the size of the flexible div.

I especially appreciate solutions that can handle complex scenarios with flexible div being nested in other divs and the content being a not known in advance.

Alex W
  • 37,233
  • 13
  • 109
  • 109
Joe
  • 7,922
  • 18
  • 54
  • 83
  • StackOverflow isn't a "here is what I want, give me a solution" kind of site. You should try to solve this on your own and post your code when you get stuck. – Wex Jul 18 '12 at 20:46
  • possible duplicate of [How can I make a DIV take up the rest of the height of a container div?](http://stackoverflow.com/questions/2023512/how-can-i-make-a-div-take-up-the-rest-of-the-height-of-a-container-div) – Wex Jul 18 '12 at 20:47
  • Try `position: absolute` or `position: fixed` for the flexible div. – jzacharia Jul 18 '12 at 20:49

1 Answers1

1

By default divs are 100% of the width of its container. So if the container holding flexible is not 100% width of the document then it will not be. You can position absolute and give it a specific width but it will have to be changed as the window grows or shrinks.

<script>
$(window).resize(function(){
  var windowWidth =  $(window).width();
  $(".flexible").width(windowWidth);
});
</script>
chadpeppers
  • 2,057
  • 1
  • 20
  • 27