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 высоту до полноэкранного дел.

min-height: 100vh; 

https://jsfiddle.net/ep3am6xz/3/ Обновлено скрипку

Answer 2

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

Answer 3

Он работает

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

демо - https://jsfiddle.net/grinmax_/ep3am6xz/4/