Search code examples
htmlcssfullscreen

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

How can I have my sections fullscreen with min-height 100%?

I want to force the section height when the content requires more height, else just keep it at 100% fullscreen.

My testing code at jsfiddle.

You can see that the content is cropped when it is longer than the screen. But I want to force the height to grow. Is it possible?

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>
Solution

  • You can give 100vh height to the fullscreen div.

    min-height: 100vh;

    https://jsfiddle.net/ep3am6xz/3/ Updated Fiddle