0

A web app has the following structure but the scroll goes off the page. Any ideas what is going wrong?

http://jsfiddle.net/kYEES/

HTML

<div class="wrapper">
<div class="container">
  <div class="fixed-height">
    <p>Fixed height div</p>
  </div>

  <div class="scrolling-height">
    <p>Scrolling div</p>
  </div>
</div>
</div>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper { 
  position: absolute;
  height: 100%;
  width: 100%;
}

.container {
  background: lightgray;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  position: relative; 
}

.fixed-height {
  background-color: yellow;
  height: 40px;
  padding: 5px 10px;
}

.scrolling-height {
  background-color: green;
  bottom: 0;
  height: 100%;
  overflow-y: scroll;
  margin-bottom: 20px;
  padding: 5px 10px;
  position: absolute;
  top: 40px;
}
Dan
  • 1,536
  • 4
  • 17
  • 31

1 Answers1

0

Something like this: http://jsfiddle.net/DhWm5/3/ I gave your container a position: relative and your scrollable div an absolute position:

.container {
    background: lightgray;
    height: 100%;
    padding: 10px;
    position:relative;
}
.scrolling-height {
    background-color: green;
    margin-bottom: 50px;
    overflow-y: scroll;
    padding: 5px 10px;
    position:absolute;
    top: 50px; bottom: 0;
}

The top: 50px is to allow for the fixed height div and its padding;

gaynorvader
  • 2,619
  • 3
  • 18
  • 32
  • Ok, this works, great. Is there a way without absolute positioning? Just curious. – Dan Apr 26 '13 at 15:38
  • Not unless you always know the height of your container div or using jQuery. At least as far as I know ;) Any reason why you don't want absolute positioning? – gaynorvader Apr 26 '13 at 15:40
  • No, not really, just sometimes feels a bit hacky. – Dan Apr 26 '13 at 15:41
  • It can be very powerful if used correctly. Perfectly acceptable to use. I'd recommend reading the answer here: http://stackoverflow.com/questions/2275084/why-shouldnt-i-use-positionabsolute-for-positioning-everything – gaynorvader Apr 26 '13 at 15:43
  • The solution doesn't work if it's in an external wrapper that is set to position absolute. I've realised, after working through your solution, that it's this aspect that is the actual problem. Check this update http://jsfiddle.net/ADR8K/ – Dan Apr 26 '13 at 16:52
  • You need to give `.container` a position other than static or else `.scrolling-height` won't be positioned absolutely to it, it'll be positioned according to the next parent element with a non-static `position` http://jsfiddle.net/ADR8K/1/ – gaynorvader Apr 26 '13 at 16:56
  • Even with positon relative the scroll goes off the page, which was my original problem http://jsfiddle.net/kYEES/ – Dan Apr 26 '13 at 17:10