Question

我有这个jsfiddle http://jsfiddle.net/r3pek/wxffL/，我试图理解为什么滚动超出窗口大小：/

如果我从右窗格中删除“height：100％”，我没有卷轴;如果我添加它，我有一个滚动但超出窗口。我可以将滚动限制在窗口的任何方式吗？！

提前致谢！

编辑：只是快速更新...... 我更新了小提琴以反映实际问题。我有一个图像，空间作为标题，看起来不考虑图像大小。（我真的 suck 在CSS：P）

Answer 1

您必须为要滚动的元素定义高度。这就是当您移除高度时滚动条消失的原因。您还要在div中添加填充以及100％的高度。这增加了元素的高度，因此它最终比窗口高。将高度降低到小于100％，可能达到90％的高度，并使用它。这将允许您保留滚动条并将其保持在窗口内。我有一个小提琴set up for you here。

Answer 2

元素的总高度（或“外部高度”）等于内部高度（可以在css中指定）+填充+边框。

如果您使用height: 100%但随后还添加了填充和/或边框，则总高度将大于100％。有一个名为box-sizing的css属性可以帮助你，但它不是交叉broswer（你猜对了，IE＆lt; 9）。

如果删除边框和填充，它将被修复。但是要在外部元素上设置边框和填充...你需要有创意（或者带着特定问题回到这里）

Answer 3

好的，我解决了这个问题，只是不确定它是不是“正确的方法”。不管怎么说，我就是这样做的：

在标记之前添加了此内容：

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

然后，我创建了一个函数来计算“右窗格”的正确大小：

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);
}

这样做，现在在页面加载后，为右窗格DIV计算正确的高度。它有效：）

感谢所有答案，因为他们让我明白了问题所在！

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

3 个答案: