Question

基本上，我正在寻找一个完整的浏览器高度登陆页面。但是，似乎背景仅适用于内容的高度。我设计了父容器的样式，以获得100％的浏览器高度。

＆＃13;

#header {
  position: relative;
  background: #202020;
  background-size: cover;
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
}
#header .content {
  position: relative;
  top: 50%;
}
#header p {
  margin: 0;
  padding: 20px;
}
#header .name {
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  word-spacing: 12px;
  font-size: 40px;
  letter-spacing: 2px;
}
#header .tagline {
  font-family: 'Lato', sans-serif;
  font-weight: lighter;
  opacity: 0.7;
  padding-top: 30px;
  word-spacing: 2px;
  font-size: 20px;
  margin-top: -30px;
}
#header .icons {
  margin-left: auto;
  margin-right: auto;
}
#header .icons i {
  padding-right: 20px;
}
#header .icons a {
  color: #ffffff;
  opacity: 0.3;
  -webkit-transition: opacity 0.3s;
  text-decoration: none;
  cursor: pointer;
}
#header .icons a:hover {
  opacity: 4;
}
#header .scroll {
  position: absolute;
  color: #ffffff;
  display: inline;
  bottom: 36px;
  opacity: .3;
  -webkit-transition: opacity 0.3s;
}
#header .scroll:hover {
  opacity: 0.9;
}

＆＃13;

<section id="header">
  <div class="content">
    <p class="name">Text Name</p>
    <p class="tagline">Some blurb goes here</p>
    <div class="icons">
      <a href="http://www.github.com/">
        <i class="fa fa-github-alt fa-lg"></i>
      </a>
      <a href="http://www.twitter.com/">
        <i class="fa fa-twitter fa-lg"></i>
      </a>
      <a href="mailto:test">
        <i class="fa fa-paper-plane fa-lg"></i>
      </a>
      <a href="http://www.linkedin.com/">
        <i class="fa fa-linkedin fa-lg"></i>
      </a>
    </div>
  </div>

  <a class="scroll" href="#">
    <i class="fa fa-chevron-down fa-lg"></i>
  </a>
</section>

＆＃13;

Answer 1

您可以将背景添加到#header：

，而不是body

body {
  background: #202020;  
}

或者您可以设置父级的height，我猜是body：

html, body {
  height: 100%;  
}

请注意，您还应设置html的高度，因为body是html的孩子。

Answer 2

您可以设置与视口相关的元素高度。在Web Design Weekly上有对此的参考。

此单位（取自网站）为：

vw：1/100视口宽度
vh：1/100视口高度
vmin：最小边的1/100
vmax：最大边的1/100

如果将主容器设置为100vh，则它将是视口的高度。这对于获得全高图像非常有用，但需要谨慎使用，因为（根据我的经验）当内容对于窗口高度来说太长时，事情会变得有点奇怪，并且需要滚动。

Answer 3

你需要使包含你内容的身体100％高度。尝试：

html,body{
height:100%;
}

Answer 4

此外，

http://srobbin.com/jquery-plugins/backstretch/

Backstretch，一个简单的jQuery插件，允许您将动态调整大小，可幻灯片显示的背景图像添加到任何页面或元素。

如何使背景拉伸浏览器高度？

4 个答案: