如何通过滚动使元素占据全屏高度？
如何通过滚动使元素占据全屏高度？
提问于 2016-11-04 09:47:19
我在我的网站上使用引导带，我想让类jumbotron的元素占据完整的用户窗口。然后，用户可以滚动到网站的其余部分。
目前，我与以下方面开展了合作：
CSS:
jumbotron { height: 100vh;}HTML:
<div class="row">
<div class="jumbotron">
...
</div>
</div>
... rest of site ...但我想要愚弄我的网站，使其尽可能可靠，并希望使用一个更广泛接受的方式。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-04 09:56:40
您需要将container-flud设置为jumbotron class之前的全屏高度，创建一个类并给出类似于.fullS_height {height: 100vh;}的样式
HTML:
<div class="container-flud">
<div class="jumbotron fullS_height">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>CSS:
.fullS_height {
height: 100vh;
}
.fullS_height {
height: 100vh;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-flud">
<div class="jumbotron fullS_height">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Stack Overflow用户
发布于 2016-11-04 09:52:44
您需要做的是将jumbotron的每个父级提供给html CSS属性height:100%；
示例
html, body, .container, .row, .jumbotron {
height: 100%;
}<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
...
</div>
</div>
</div>
</body>
</html>
请记住，<body> 只适用于标记之后的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40428882
复制
相似问题
相对包装器中的CSS居中内容
#CSS包装器无法识别内容
CSS拉伸包装器垂直封装内容
带有CSS样式的内容包装器问题
HTML/CSS -自动调整包装器中内容的宽度
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
