Question

我正在尝试制作一个非常简单的页面，但是我正试图找到布局的解决方案。

我想要实现的是一个简单的标题及其下方，一些内容（我不知道它的实际高度，但可能不会覆盖视口的整个高度），其中包含完整的背景封面图像剩余的高度。

我尝试在容纳内容的容器上使用100vh，但正如您在codepen中看到的那样：http://codepen.io/renttless/pen/vGvzRj，它会创建一个显然与前一个兄弟一样大小的滚动条，它将是标题。

以下是代码：

  <body>
  <div class="containerTest">
    <header>
      <nav>
        <ul>
          <li>Home</li>
          <li>Who are we</li>
          <li>Our work</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>

    <section class="sectionTest">
     <div class="backgroundTest">
       <h1>I'm a full size h1</h1>
       <p>I'm some paragraph</p>


 </div>
    </section>
  </div>

CSS：

    html,body{
  height: 100%;
}
.sectionTest .backgroundTest{
    background-color:red;
    height:100vh;
}

Answer 1

这是一件痛苦事。也许尝试使用 flexbox 方法。这是一个example。

<div class="box">
  <div class="row header">
    <header>
      <nav>
        <ul>
          <li>Home</li>
          <li>Who are we</li>
          <li>Our work</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
  </div>
  <div class="row content">
       <h1>I'm a full size h1</h1>
       <p>I'm some paragraph</p>
  </div>
</div>

CSS：

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
  flex: 0 1 30px;
}

.box .row.header {
  flex: 0 1 auto;
  background-color: red;
}

.box .row.content {
  flex: 1 1 auto;
  background-color: green;
}

Answer 2

如果您在标题中添加背景并将100vh移动到html元素，它将解决您的问题

＆＃13;

    html{
        background-color:red;
        height:100vh;
    }
    header{
      background: white;
    }
    body, header ul{
      margin: 0;
    }

＆＃13;

  <body>
  <div class="containerTest">
    <header>
      <nav>
        <ul>
          <li>Home</li>
          <li>Who are we</li>
          <li>Our work</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>

    <section class="sectionTest">
     <div class="backgroundTest">
       <h1>I'm a full size h1</h1>
       <p>I'm some paragraph</p>


 </div>
    </section>
  </div>

＆＃13;

100vh从前兄弟的底部增加空间

2 个答案: