拉伸容器底部，但允许它扩展如果更多的内容

Question

我正在寻找更好的解决方案，没有足够的内容填充屏幕的问题。

通常情况下，如果你想填充屏幕，你可以使HTML，身高100％，然后你的容器100％或只使用100vh，就像我在下面的JSFiddle。

问题是如果内容最终延伸超过屏幕100％的高度，它会被切断。

我想知道是否有一种方法（可能与flexbox），你可以有100％的高度，但如果内容超过100％的容器扩大的规模。

html, body 
 
{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.content 
 
{ 
 
    background: grey; 
 
    /* height: 100vh; - this works but if content goes past 100vh it gets cut off */ 
 
}

<div class="content"> 
 
    <span> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
 
    </span> 
 
</div>

Answer 1

围绕content要应用使用的容器和display: flex现在content可以由列flexbox - 见下面的演示和updated fiddle：

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    min-height: 100vh; 
 
    display: flex; 
 
} 
 

 
.content { 
 
    background: grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
 
    </div> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
 
    </div> 
 
    <div> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你只是缺少overflow: auto;在.content DIV

Your Fiddle updated

body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

.content { 
    background: grey; 
    height: 100%; 
    overflow: auto; 
}