コンテナを底まで伸ばしても、それ以上の内容がある場合は伸ばすことができます

Question

私は、画面を満たすのに十分なコンテンツがないという問題の解決策を探しています。

通常、画面を埋めるには、HTML、ボディの高さを100％、コンテナを100％にするか、以下のJSFiddleのように100vhを使用します。

コンテンツが最終的に切り取られた画面の高さ100％を超えて伸びてしまうのは問題です。

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

にoverflow: auto;が欠落していますcontentが列flexbox行うことができ、今とdisplay: flexと - デモ下記を参照して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

あなたはどのあなたはを適用するcontent周りの容器を使用して、あなたの.contentのdiv

Your Fiddle updated

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

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