Question

我正在试图弄清楚当网站加载时（无论浏览器大小如何），我的初始着陆区域是否适合浏览器的完整视口。直接在首屏下方，应该是我的内容。

我尝试了几种不同的方法（将html＆amp; body设置为100％然后让我想要适合屏幕的div继承它，将高度设置为vh，但没有什么可行的）。我也不确定这样做的最佳做法是什么。

我将在下面发布我的代码 - 希望找出我做错了什么，我的选择是什么，以及最佳做法是什么。

对不起，如果代码有点长，我也使用bootstrap3＆amp; 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>

Answer 1

在div上使用高度为100vh（视口高度）和宽度为100vw（视口宽度）。确保您的div位于相对位置并且具有零边距（顶部和左侧）。

Answer 2

您可以使用Jquery根据视口的大小设置特定的div

handleRequest

Answer 3

正如别人建议的那样，我会用100vh来设定元素的高度。但是，当您在全屏元素上方导航时，您需要考虑到它会将您的元素向下推。使用calc（）通过从视口高度减去导航高度来解决此问题。

请参阅此处的简单示例：

＆＃13;

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; 
}

＆＃13;

<nav>Navigation</nav>
<section class="aboveFold">
  Above the fold
</section>
Everything that goes Beneath the fold here...

＆＃13;

如何在加载时使div覆盖整个屏幕

3 个答案: