CSS - comment forcer une hauteur fullsceen à croître pour des contenus plus longs?

Question

Comment puis-je avoir mes sections en plein écran avec min-height 100%?

Je veux forcer la hauteur de la section lorsque le contenu nécessite plus de hauteur, sinon, gardez-le à 100% plein écran.

Mon code de test est le jsfiddle.

Vous pouvez voir que le contenu est rogné lorsqu'il est plus long que l'écran. Mais je veux forcer la taille à grandir. C'est 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> 

Answer 1

Vous pouvez donner de la hauteur 100vh à la div plein écran.

min-height: 100vh; 

https://jsfiddle.net/ep3am6xz/3/ Mise à jour Fiddle

Answer 2

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

Answer 3

Il fonctionne

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

démonstration en direct - https://jsfiddle.net/grinmax_/ep3am6xz/4/