html–DIV和浏览器窗口一样大,没有javascript_html-js-css

概述我想创建一个与浏览器窗口一样大的DIV,然后使用垂直滚动显示网站.我正在寻找的效果类似于THIS PAGE中的效果(注意总是与浏览器窗口一样大的大横幅,以及底部的内容)：记住这个HTML：<div class='banner'> This banner is always big like the browser window </d

我想创建一个与浏览器窗口一样大的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下启动
          总结       以上是内存溢出为你收集整理的html  –  DIV和浏览器窗口一样大,没有javascript全部内容，希望文章能够帮你解决html  –  DIV和浏览器窗口一样大,没有javascript所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1121725.html

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

`发表评论`

`评论列表（0条）`