可滚动的div在窗口之外显示内容？

Question

I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/

If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!

Thanks in advance!

EDIT: Just a quick update... I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )

Answer 1

You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here .

Answer 2

The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.

If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).

If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)

Answer 3

OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:

added this right before the tag:

<script>
    window.onload=setRightPaneHeight; 
</script>

Then, I created the function that will calculate the right size for the "rightpane":

function setRightPaneHeight(){
    var pic = document.getElementById("headerPic");
    var pic_h = pic.offsetHeight;
    var total_h = window.innerHeight;
    var right_pane =  document.getElementById("rightpane")

    $(".rightpane").height(total_h - pic_h - 30);
}

That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)

Thanks for all the answers as they made me understand what the problem was!