如何使div在加载时覆盖全屏
[英]How to make a div cover the full screen on load
问题描述
我试图弄清楚如何在网站加载时使我的初始着陆区域拉伸以适合浏览器的整个视口（无论浏览器大小如何）。 在折痕的正下方，应该是我的内容。
我尝试了几种不同的方法（将html＆body设置为100％，然后让我要适合屏幕的div继承它，将height设置为vh，但没有任何效果）。 我也不确定这样做的最佳实践是什么。
我将在下面发布我的代码-希望找出我做错了什么，我的选择是什么以及最佳实践是什么。
抱歉，如果代码有点长，我也在使用bootstrap3＆sass。
html body { font-family: 'Lato', sans-serif; background-color: #ABB7B7; height: 100%; width: 100%; margin: 0; padding: 0; } html body .landing-page-wrapper { background-color: #ABB7B7; height: 100%; min-height: 100%; } html body .landing-page-wrapper .header-and-main-nav { padding-top: 36px; } html body .landing-page-wrapper .header-and-main-nav .company-name { color: #374A67; font-size: 18px; font-family: pier-regular; } html body .landing-page-wrapper .header-and-main-nav .logo-container { height: 200px; background-color: #374a67; text-align: center; } html body .landing-page-wrapper .header-and-main-nav .logo-container .company-logo { color: #ECF0F1; font-size: 72px; font-family: pier-bold; text-transform: uppercase; padding-top: 45px; } html body .landing-page-wrapper .header-and-main-nav .nav-ul { list-style: none; text-align: right; } html body .landing-page-wrapper .header-and-main-nav .nav-ul .nav-a { text-decoration: none; color: #374A67; font-size: 16px; font-family: pier-regular; } html body .landing-page-wrapper .quote-board .quote-first-half { font-family: pier-regular; font-size: 56px; color: #ECF0F1; padding-top: 75px; } html body .landing-page-wrapper .quote-board .quote-second-half { font-family: pier-bold; font-size: 48px; color: #ECF0F1; } html body .landing-page-wrapper .test { background-color: rgba(252, 252, 98, 0.75); height: 299px; width: auto; margin-top: 55px; } html body .landing-page-wrapper .test .intro-copy-one { font-family: pier-regular; color: #374A67; text-align: right; font-size: 28px; line-height: 48px; padding-top: 50px; padding-right: 20px; padding-left: 20px; } html body .landing-page-wrapper .test .intro-copy-two { font-family: pier-regular; color: #374A67; text-align: right; font-size: 24px; line-height: 48px; padding-right: 20px; padding-left: 20px; } html body .landing-page-wrapper .test .intro-copy-three { font-family: pier-regular; color: #374A67; text-align: right; font-size: 24px; line-height: 48px; padding-right: 20px; padding-left: 20px; } html body .solutions-container { height: 200px; background-color: pink; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/app.css"> <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'> </head> <body> <div class="landing-page-wrapper"> <div class="container-fluid header-and-main-nav"> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <p class="company-name">hogue business valuations</p> </div> <div class="col-md-3 logo-container"> <h1 class="company-logo">hbv</h1> </div> <ul class="nav-ul"> <li class="col-md-2 nav-li"><a href="#" title="solutions" class="nav-a">solutions</a></li> <li class="col-md-2 nav-li"><a href="#" title="about" class="nav-a">about</a></li> <li class="col-md-2 nav-li"><a href="#" title="contact" class="nav-a">contact</a></li> </ul> </div> </div> </div> <div class="container-fluid quote-board"> <div class="row"> <div class="col-md-12"> <h1 class="quote-first-half">your business may be your most valuable asset</h1> </div> </div> <div class="row"> <div class="col-md-12"> <h2 class="quote-second-half">shouldn't you know what it's worth?</h2> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-offset-5 col-md-7 test"> <p class="intro-copy-one">For over thirty years Hogue Business Valuations has been </p> <p class="intro-copy-two">providing quality solutions to large and small businesses alike. </p> <p class="intro-copy-three">Look below for one that best suits you. </p> </div> </div> </div> </div> <div class="container-fluid solutions-container"> <div class="row"> <div class="col-md-12"> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
3 2016-02-22 16:08:04
为此，请在div上使用100vh的高度（视口高度）和100vw的宽度（视口宽度）。 确保您的div相对放置并具有零边距（顶部和左侧）。
解决方案2
1 已采纳 2016-02-22 15:56:13
您可以使用Jquery根据视口的大小设置特定的div
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('#somediv').css({'height': vph + 'px'});
}
解决方案3
1 2016-02-22 17:00:19
正如其他人所建议的那样，我将使用100vh设置元素的高度。 但是，当您在全屏元素上方找到导航时，您需要考虑到它会将您的元素向下推了一点。 使用calc（）通过从视口高度中减去导航高度来解决此问题。
在这里查看快速示例：
body{ margin: 0; text-align: center; } nav{ height: 50px; background-color: black; line-height: 50px; color: white; } section{ height: calc(100vh - 50px); background-color: orange; line-height: 100vh; }
<nav>Navigation</nav> <section class="aboveFold"> Above the fold </section> Everything that goes Beneath the fold here...
如何扩展div以覆盖较小屏幕上的视频并使下拉菜单响应？
[英]How to extend div to cover video on smaller screen and make dropdown menu responsive?
旧问题：仅当screenHeight大于页面高度时，如何使jQuery Mobile Page覆盖整个屏幕高度
[英]The old issue: how to make jQuery Mobile Page cover the full screen height only when screenHeight is greater than page height
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.