CSS

Question

如何让我的部分全屏显示最小高度为 100%？

我想在内容需要更多高度时强制设置部分高度，否则只需将其保持在 100% 全屏。

我的测试代码在 jsfiddle。

您可以看到当内容比屏幕长时，内容被裁剪了。但我想强迫身高增长。可能吗？

CSS:

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

header {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99999;
}

section {
  border: 1px solid black;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #EFEFEF;
}

.full-screen {
  height: 100%;
  /* makes panels the entire window height */
}

HTML:

<main class="full-screen" role="main">

  <section class="full-screen blue">
    <div>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/QVGeilNsJFU" frameborder="0" allowfullscreen></iframe>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/QVGeilNsJFU" frameborder="0" allowfullscreen></iframe>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/QVGeilNsJFU" frameborder="0" allowfullscreen></iframe>
    </div>
  </section>

  <section class="full-screen orange">
    <div>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="full-screen red">
    <div>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

  <section class="full-screen blue">
    <div>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>

</main>

Answer 1

你可以给全屏100vh的高度div。

min-height: 100vh;

https://jsfiddle.net/ep3am6xz/3/ 已更新 Fiddle

Answer 2

.full-screen {
      min-height: 100vh;
      /* vh = viewport height || CSS3 */
}

Answer 3

有效

.full-screen {
  min-height: 100vh;
}

现场演示 - https://jsfiddle.net/grinmax_/ep3am6xz/4/

CSS - 如何强制全屏高度增加以显示更长的内容？

CSS - how to force a fullsceen height to grow for longer contents?

html

fullscreen