Div 높이 100 % 및 컨텐츠에 맞게 확장

내 페이지에 높이가 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이 오버레이 스크롤을 사용자와 함께 사용하여 항상 보이는 영역을 덮고 사전로드 애니메이션을 화면 중앙에 유지했습니다.

CSS ID #some_div 에이 두 줄을 추가하십시오.

display: block;
overflow: auto;

그 후 당신은 당신이 찾고있는 것을 얻을 것입니다!

나는 이것이 매우 간단한 대답이기 때문에 질문을 이해했다고 확신하지는 않지만 여기에 간다 : :)

컨테이너 의 overflow 속성 을 visible 또는 auto로 설정하려고 했습니까 ?

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

추가하면 동적 컨테이너에 필요한 크기로 검은 색 컨테이너를 밀어야합니다. 자동에는 스크롤 막대가있는 것처럼 보이기 때문에 자동으로 표시하는 것을 선호합니다 ...

최신 브라우저는 "뷰포트 높이"단위를 지원합니다. div를 사용 가능한 뷰포트 높이로 확장합니다. 다른 접근 방식보다 더 안정적이라고 생각합니다.

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

너도 이렇게 할 수있어

display:block;
overflow:auto;
height: 100%;

콘텐츠에 따라 각 동적 div가 포함됩니다. 클래스가있는 공통 div가 있다면 내용에 따라 각 동적 div의 높이가 증가한다고 가정하십시오.

당신은 또한 사용할 수 있습니다

 display: inline-block;

광산은 이것과 함께 일했다

위치없는 오버레이 : 고정

최근 메뉴에서 이것을 알아 낸 정말 멋진 방법은 본문을 다음과 같이 설정하는 것입니다.

position: relative

래퍼 클래스를 다음과 같이 설정하십시오.

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

즉, 고정 위치를 설정할 필요가 없으며 여전히 스크롤을 허용 할 수 있습니다. 나는 이것을 정말로 큰 메뉴를 오버레이하는 데 사용했습니다.

플렉스 사용

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

좋아, 나는 이와 같은 것을 시도했다 :

몸 (정상)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

그것을 작성하는 정확한 방법은 아니지만 주 div 디스플레이를 테이블로 만들면 확장되어 스크롤 막대를 구현했습니다.