CSS或jQuery：让最后一个div填充屏幕高度的其余部分

我有一组需要在初始屏幕上看到的3个元素，而在这些元素下面的主体中的东西需要低于底部的初始屏幕，但用户仍然需要能够在加载后滚动到所有内容。其中最好的例子就是dropbox.com上的登录页面（登出时）。CSS或jQuery：让最后一个div填充屏幕高度的其余部分

无论用户缩小多少，该行下方的元素都会保持在它下面，直到用户向下滚动才会看到。我正在寻找一个好的CSS或jQuery解决方案。

我看过this但我不能简单地使这3个元素绝对。

我这样做的最好方法是将第三个div的高度扩展到初始屏幕的底部，我该怎么做？

编辑：我总共有大约6个divs，而我只想要第一个3可见，而其余的必须低于最初的屏幕边界。

编辑：这是div布局的画面： enter image description here

来源

2013-07-25 user1933131

三个元素彼此相邻，高度相同吗？或者彼此重叠，跨越初始窗口的高度？ – James

Dropbox检查当前窗口并设置所有适当的值，以推送第一个div（'top'）作为您在加载时看到的唯一项目（同时给定当前内容自身的大小限制）。注意它们也在重新调整窗口大小。 – KnowHowSolutions

$(document).ready(function(){ 
    var w = $(window).height(); //Gives height of whole window 

    // then set css heights based on window height 
});

更关于3个div如何布局的形成将会有所帮助！

您也可以在它调整窗口大小之前进行此操作。

$(window).resize(function(){ 
    var w = $(window).height(); //Gives new Height of window 

    //Then set css heights again 
});

来源

2013-07-25 18:38:59 James

这似乎工作。 – user1933131

尝试

$(document).ready(function() { 
var height = $(window).height(); 
$('div').css('height', height + 'px'); 
});

和变焦

var zoom = document.documentElement.clientWidth/window.innerWidth; 
$(window).resize(function() { 
var zoomNew = document.documentElement.clientWidth/window.innerWidth; 
if (zoom != zoomNew) { 

    zoom = zoomNew 
} 
});

fiddle

来源

2013-07-25 18:38:09 Nick

这将工作，除了当用户缩小内容最终可见时。如果您看一下Dropbox示例，那么应该在屏幕下方的内容始终保持在页面的边界以下，而不管窗口大小如何调整，直到用户滚动为止。 – user1933131

看看我的编辑是否有效。它可能不够精确。您可以尝试使用数学运算来确定特定浏览器的正确尺寸。 – Nick

你应该能够只用css来实现这一点，但它的重要定义html和body标签是100％高度：

<body> 
    <div class="first"> 
    <h1>First Box</h1> 
    </div> 
    <div class="second"> 
    <h1>Second Box</h1> 
    </div> 
    <div class="third"> 
    <h1>Third Box</h1> 
    </div> 
</body>

的CSS：

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

div { 
    height: 100%; 
    text-align: center; 
} 

.first { 
    background: #ccc; 
} 

.second { 
    background: #999 
} 

.third { 
    background: #000 
} 

h1 { 
    color: white; 
    padding-top: 100px; 
}

Jsfiddle：http://jsfiddle.net/sLANY/

来源

2013-07-25 18:59:54 jerrylow

这真的很整洁，但是，我有大约6个divs，前三个应该在屏幕的最初视图中应该是屏幕的高度。包装第一个3在一个包装，并使他们的身高100％不起作用，没有使HTML和身高100％ – user1933131

我想我明白你想要捕获 - 不是100％，因为我不知道什么蓝色条代表你的图表，但我已经更新了jsfiddle，你可以检查它并看到：http://jsfiddle.net/sLANY/1/ – jerrylow

我会试试看。蓝条是第二格的背景。它必须被绝对化，才能延伸到屏幕的末尾来覆盖非语义的网格系统。 – user1933131

CSS或jQuery：让最后一个div填充屏幕高度的其余部分

回答

相关问题