내 페이지에 높이가 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 내부의 내용은 대부분 절대적으로 배치되며 데이터베이스에서 동적으로 생성되므로 높이를 미리 알 수 없습니다.
편집 : 다음은 문제의 스크린 샷입니다.
답변
다음은 CSS 스타일에서 수행해야 할 작업입니다. div
display: block;
overflow: auto;
그리고 만지지 마십시오 height
답변
설정 height
에 auto
와 min-height
에 100%
. 대부분의 브라우저에서 해결해야합니다.
body {
position: relative;
height: auto;
min-height: 100% !important;
}
답변
일반적으로이 문제는 Parent Div의 Child 요소가 플로팅 될 때 발생합니다. 문제 의 최신 해결책 은 다음과 같습니다 .
CSS 파일 에서 의사 선택기와 함께 .clearfix 라는 다음 클래스를 작성하십시오 .
.clearfix:after {
content: "";
display: table;
clear: both;
}
그런 다음 HTML에서 .clearfix 클래스를 부모 Div에 추가하십시오. 예를 들면 다음과 같습니다.
<div class="clearfix">
<div></div>
<div></div>
</div>
항상 작동해야합니다. 클래스 이름을 .clearfix 대신 .group 으로 호출 하면 코드의 의미가 향상됩니다. 큰 따옴표 “”사이에 Content 값에 점 또는 공백을 추가 할 필요는 없습니다. 또한 오버플로 : auto; 문제를 해결할 수 있지만 스크롤 막대 표시와 같은 다른 문제가 발생하므로 권장하지 않습니다.
출처 : Lisa Catalano와 Chris Coyier의 블로그
답변
를 그대로두고 height: 100%
사용 display:block;
하면 div
의 내용만큼의 공간을 사용 하게 됩니다 div
. 이렇게하면 모든 텍스트가 검은 색으로 유지됩니다.
답변
이 질문은 오래되었지만 업데이트가 필요합니다. 다른 방법은 다음과 같습니다.
#yourdiv {
display: flex;
width:100%;
height:100%;
}
답변
이 시도:
body {
min-height:100%;
background:red;
}
#some_div {
min-height:100%;
background:black;
}
IE6 및 이전 버전은 최소 높이 속성을 지원하지 않습니다.
문제는 본체에 높이가 100 %라고 말하면 하나의 브라우저 “뷰포트”(브라우저 도구 모음 및 상태 표시 줄 및 메뉴 막대를 제외하고보기 영역)와 창 가장자리). 내용이 하나의 뷰포트보다 크면 배경에 지정된 높이가 오버플로됩니다.
본문에있는이 최소 높이 속성은 콘텐츠가 한 페이지 전체를 맨 아래까지 채우지 않을 경우 배경이 최소한 하나의 뷰포트만큼 높아야하지만 더 많은 내부 콘텐츠를 포함하도록 아래쪽으로 커지도록해야합니다.
답변
오래된 질문이지만 제 경우에는 position:fixed
그것을 사용하여 나를 위해 해결했습니다. 내 상황은 조금 달라졌을 수도 있습니다. div
페이지를로드하는 동안 표시 해야하는 로딩 애니메이션이있는 반투명 오버레이가있었습니다 . 따라서 화면을 비우지 않은 영역이 아닌 창을 채우 height:auto / 100%
거나 사용했습니다 min-height: 100%
. position:fixed
이 오버레이 스크롤을 사용자와 함께 사용하여 항상 보이는 영역을 덮고 사전로드 애니메이션을 화면 중앙에 유지했습니다.