내 페이지에 높이가 100 %로 설정된 div 요소가 있습니다. 신체의 높이도 100 %로 설정됩니다. 내부 div에는 배경과 그 배경이 있으며 본문 배경과 다릅니다. 이것은 div 높이를 브라우저 화면 높이의 100 %로 만드는 데 효과적이지만 문제는 해당 div 안에 브라우저 화면 높이를 넘어 세로로 확장되는 내용이 있다는 것입니다. 아래로 스크롤하면 div가 페이지 스크롤을 시작 해야하는 시점에서 끝나지 만 내용이 그 이상으로 넘칩니다. 내부 콘텐츠에 맞게 div를 항상 맨 아래로 이동시키는 방법은 무엇입니까?

내 CSS 단순화는 다음과 같습니다.

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

페이지를 스크롤하면 검은 색이 끝나고 내용이 빨간색 배경으로 흐릅니다. #some_div에서 위치를 상대 또는 절대로 설정했는지 여부는 중요하지 않지만 문제는 어느 쪽이든 발생합니다. #some_div 내부의 내용은 대부분 절대적으로 배치되며 데이터베이스에서 동적으로 생성되므로 높이를 미리 알 수 없습니다.

편집 : 다음은 문제의 스크린 샷입니다.

답변

display: block;
overflow: auto;

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

<div class="clearfix">
    <div></div>
    <div></div>
</div>

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

body {
    min-height:100%;
    background:red;
}

#some_div {
    min-height:100%;
    background:black;
}