如何使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.