높이가 100vh로 설정된 HTML 요소가 항상 전체 페이지 높이에 스팬되지는 않습니다

Question

본문 내용 컨테이너에이 이상한 문제가 있습니다. 나는 그것의 높이를 CSS에서 100vh로 설정할 수 있도록보기 포트만큼 키가 크고 싶습니다. 그것은 본문 내용 컨테이너 안에 부트 스트랩 그리드를 만드는 것을 제외하고 모든 페이지에서 작동합니다. 여기

당신이 어떻게 보이는지 확인할 수 있습니다

파란색 틱의 사업부 내 몸의 콘텐츠입니다.

완전히 축소하면 파란색 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; 
}