高さが100vhのHtml要素がページ全体の高さに跨っているとは限りません

Question

私の体のコンテンツコンテナでこの奇妙な問題が発生しました。ビューポートと同じ高さにしたいので、CSSの高さを100vhに設定します。このボディコンテンツコンテナ内にブートストラップグリッドを作成しようとしているページ以外のすべてのページで動作します。ここで

あなたはそれがどのように見えるかを確認することができます

ブルーっぽいのdivは私の体の内容です。

ズームアウトすると、divの高さは確かに100vhです。その中

私はHtml.Partialはこのような反復ごと何かにレンダリングするこの

<div class="container body-content"> 
    <div class="row text-center"> 
     @foreach (var item in Model.Products) 
     { 
      @Html.Partial("ProductColumn", item) 
     } 
    </div> 
</div> 

持っている：ここで

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 product-column-wrapper"> 
    <div class="product-column"> 
     //product title 

     <div id="thumbnail-container"> 
      <a class="d-block mb-4 h-100" asp-route="@WebConstants.Routes.ProductDetails" asp-route-id="@Model.Id" asp-route-title="@Model.Name"> 
       <img id="thumbnail" src="@Model.ThumbnailSource" class="img-responsive img-thumbnail" alt="@Model.Name"> 
      </a> 
     </div> 

     //price 

     //Edit, Delete buttons 
    </div> 
</div> 

は私のCSSクラスの一部であるが：

body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 

footer { 

    color: white; 
    font-size: 13px; 
    text-align: center; 
    vertical-align: middle; 
    max-height: 15px; 
} 

.body-content { 
    background: aliceblue; 
    border-radius: 5px; 
    padding: 10px; 
    height: 100vh; 
} 

誰でもこのシナリオで身体の内容を伸ばす方法を見つけるのを助けることができたら、それは素晴らしいことです。

Answer 1

height: 100vhの代わりにmin-height: 100vhを試してみてください。例えば。

.body-content { 
    background: aliceblue; 
    border-radius: 5px; 
    padding: 10px; 
    min-height: 100vh; 
}