Question

在this link上我构建了一个简单的基于html / css的布局。我想要实现以下目标：我希望窗口高度小于内容高度时内容部分会溢出。页脚和页眉需要保持在相同的位置。只有内容部分必须更小。

这听起来很简单，但令我惊讶的是，我找不到解决方案。我会尝试在内容部分添加一些max- / min-height和overflow值，但这不起作用。

如果有人可以帮助我，那会很棒。感谢

Answer 1

我会使用CSS和jQuery addClass（）的组合，如下所示（我在调用内容部分#Content，让这个帖子说600px）：

//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}

现在在页面加载时，向主体添加一个onload函数（注意Content div没有任何类）：

<body onload="checkHeight()">
<div id="Content">

<!--Your content goes here-->

</div>

现在是JavaScript / jQuery：

function checkHeight() {
    var scr = screen.availHeight;
    var contentHeight = 600; //or whatever number you choose)
    if (contentHeight > scr) {
        $("#Content").addClass("contentoverflow");
    }
}

容器＆lt;时溢出内容窗户高度

1 个答案: