CSS - 如何强制fullsceen高度增长更长的内容？

我怎样才能让我的部分全屏与最小高度100％？CSS - 如何强制fullsceen高度增长更长的内容？

我想迫使部分高度时，内容需要更多的高度，否则只保持在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>

来源

2017-02-14 laukok

你可以给100vh高度全屏股利。

min-height: 100vh;

https://jsfiddle.net/ep3am6xz/3/更新小提琴

来源

2017-02-14 11:50:07 Aslam

感谢您的回答！ – laukok

如果它解决了你的问题，那么请继续选择它作为答案。通过点击勾号:) – Aslam

它需要另外6分钟才能接受答案;-) – laukok

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

来源

2017-02-14 11:51:53 SimonSolutions

谢谢你的答案！ – laukok

它的工作原理

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

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

来源

2017-02-14 11:52:18 grinmax

谢谢你的回答！ – laukok

CSS - 如何强制fullsceen高度增长更长的内容？

回答

相关问题