Question

我有一个由两部分组成的页面：第一部分可以是各种高度，第二部分应该是可见页面的所有其他大小。第二部分内部所有元素的高度可以很大，只有那部分应该是可滚动的。

我想出的最接近的是this fiddle，但问题是我使用的是第二个元素的固定高度：

.images{
    overflow-y: auto;
    height: 350px;
}

再一次：我不知道第一部分的高度，所以我不能使用height: 20%作为第一部分，height: 80%作为第二部分。

任何想法，我该如何解决？

Answer 1

添加以下jQuery代码：

var windowHeight = $(window).height();
var headerHeight = $('.header').height();
var imagesHeight = windowHeight - headerHeight;
$('.images').height(imagesHeight);

不要忘记在页面中包含主jQuery的链接：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以将其保留在<head>部分。

Answer 2

我被置于“溢出：隐藏;”属性标签中的属性

CSS：

体{

   overflow-y: hidden;

}

See demo here

仅对页面的最后部分进行overflow-auto

2 个答案: