html – DIV和浏览器窗口一样大,没有javascript

发布时间：2020-12-14 22:53:14 所属栏目：资源来源：网络整理

导读：我想创建一个与浏览器窗口一样大的DIV,然后使用垂直滚动显示网站.我正在寻找的效果类似于THIS PAGE中的效果(注意总是与浏览器窗口一样大的大横幅,以及底部的内容)：记住这个HTML：这是一种方法： .banner {position: absolute;top: 0px;right: 0px;bottom:

我想创建一个与浏览器窗口一样大的DIV,然后使用垂直滚动显示网站.我正在寻找的效果类似于THIS PAGE中的效果(注意总是与浏览器窗口一样大的大横幅,以及底部的内容)：

记住这个HTML：


这是一种方法：

.banner {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: red;
}

.content {
width: 100%;
position: relative;
background-color: green;
}

问题是,如果我对此DIV使用绝对位置,我的网站内容从页面顶部开始,并被横幅隐藏.
有没有办法在不使用javascript的情况下实现这一点？
提前致谢


最佳答案
解决方案：FIDDLE
CSS：

html,body {
    height:100%;
    margin:0;
    padding:0;
}
.banner {
    height:100%;
    background-color: red;
}
.content {
    background-color: green;
}

说明：
关键是要获得一个适合总窗口大小的基数.你可以通过设置< body>来获得这个基础.和< html>标签为100％高度(默认情况下会扩展总宽度).然后它们扩展到父窗口的100％高度.
因此,您不再需要绝对位置来调整像winow这样的元素.
您可以在第一级孩子(在您的情况下为.banner)上使用100％高度,使它们适合窗口总高度.您不必在大多数元素上设置100％宽度,因为它们会自动扩展整个宽度(块元素,如未浮动且处于相对或静态位置的div).
您的页面将保持默认定位,您的.content div将在窗口大小.banner下启动
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!