Div 높이가 100%이고 내용에 맞게 확장됩니다.

Div 높이가 100%이고 내용에 맞게 확장됩니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

div가 컨테이너에 맞게 높이를 조정하도록 하는 방법은 무엇입니까? (8개 답변)

마감됨작년에

제 페이지에 높이가 100%로 설정된 div 요소가 있습니다.차체 높이도 100%로 설정됩니다.내적인 디브는 배경과 모든 것을 가지고 있고 신체적인 배경과 다릅니다.이것은 div 높이를 브라우저 화면 높이의 100%로 만드는 데 도움이 되지만, 문제는 그 div 안에 브라우저 화면 높이를 넘어 수직으로 확장되는 콘텐츠가 있다는 것입니다.아래로 스크롤하면 페이지 스크롤을 시작해야 하는 지점에서 분할되지만, 내용은 그 이상으로 넘칩니다.어떻게 하면 디브가 항상 내부 내용에 맞게 바닥까지 가게 할 수 있습니까?

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

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

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

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

입니다.

여기 당신이 CSS 스타일로 해야 할 일이 있습니다.div

display: block;
overflow: auto;

그리고 만지지 마height

을 합니다.heightauto그리고.min-height100%이것은 대부분의 브라우저에서 해결될 것입니다.

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

일반적으로 이 문제는 상위 Div의 하위 요소가 부동할 때 발생합니다.문제의 최신 해결책은 다음과 같습니다.

CSS 파일에 의사 선택기와 함께 .clearfix라는 클래스를 입력합니다.

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

그런 다음 HTML에서 .clearfix 클래스를 상위 Div에 추가합니다.예:

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

항상 작동해야 합니다.클래스 이름을 .clearfix 대신 .group으로 부르면 코드가 더 의미 있게 됩니다.중복 따옴표 "" 사이에 내용 값에 점이나 공백을 추가할 필요는 없습니다.또한 오버플로: auto;는 문제를 해결할 수 있지만 스크롤 막대 표시와 같은 다른 문제를 발생시키므로 권장하지 않습니다.

출처: 리사 카탈라노와 크리스 코이에의 블로그

#some_div {    
  height: fit-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

당신이 그냥 떠나면,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%의 높이를 지정할 때 배경은 브라우저 "viewport"(브라우저 도구 모음 & 상태 표시줄 & 메뉴 모음 및 창 가장자리를 제외한 보기 영역) 하나의 높이로만 설정할 수 있다는 것이 문제라고 생각합니다.내용이 둘 이상의 뷰포트인 경우 배경 전용 높이가 오버플로우됩니다.

본문의 이 최소 높이 속성은 콘텐츠가 한 페이지 전체를 아래로 채우지 않는 경우 배경을 하나 이상의 뷰포트로 강제 설정해야 하지만 더 많은 내부 콘텐츠를 포함하도록 아래로 확장할 수도 있습니다.

플렉스를 사용합니다.

.parent{
    display: flex
}

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

오래된 질문이지만, 제 경우에는 다음을 사용했습니다.position:fixed제 도 있습니다.하지만 제 상황은 조금 달랐을 수도 있습니다.반투명으로 덧씌워 놓았습니다.div페이지를 로드하는 동안 표시해야 하는 로드 애니메이션이 포함되어 있습니다.그래서 사용하기height:auto / 100%또는min-height: 100%둘 다 창을 채웠지만 화면 밖 영역은 채우지 않았습니다.용사를 합니다.position:fixed이 오버레이 스크롤을 사용자와 함께 만들어서 항상 보이는 영역을 가리고 사전 로딩 애니메이션을 화면 중심에 유지했습니다.

제 경우에는 다음과 같은 경우에만 작동했습니다.

height: auto;

당신은 넣을 필요가 없습니다.display: block.

최신 브라우저는 "뷰포트 높이" 장치를 지원합니다.이렇게 하면 div가 사용 가능한 뷰포트 높이로 확장됩니다.저는 그것이 다른 어떤 접근법보다 더 신뢰할 수 있다고 생각합니다.

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

이 두 줄을 당신의 css id #some_div에 추가하기만 하면 됩니다.

display: block;
overflow: auto;

그런 다음 원하는 것을 얻을 수 있습니다!

위치가 없는 오버레이:고정

최근 메뉴에서 제가 알아낸 정말 멋진 방법은 신체를 다음과 같이 설정하는 것이었습니다.

position: relative

래퍼 클래스를 다음과 같이 설정합니다.

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

즉, 위치를 고정할 필요가 없으며 스크롤을 허용할 수 있습니다.저는 이것을 정말 큰 메뉴의 오버레이에 사용했습니다.

좋아요, 저는 다음과 같은 것을 시도했습니다:

본체(정상)

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

정확하게 쓰는 방법은 아니지만 메인 디비를 표로 만들면 확장이 되고 스크롤 바를 구현했습니다.

이것은 꽤 간단한 대답이기 때문에 질문을 완전히 이해했는지 확신할 수 없지만, 여기에... :)

컨테이너의 오버플로 속성을 표시 또는 자동으로 설정해 보셨습니까?

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

이를 추가하면 검은색 컨테이너가 동적 컨테이너에 필요한 크기로 이동합니다.auto는 스크롤 막대와 함께 제공되는 것 같기 때문에 auto보다 visible을 선호합니다...

당신도 이렇게 할 수 있습니다.

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

여기에는 콘텐츠에 따라 각 동적 디바가 포함됩니다.클래스가 있는 공통 div가 있으면 내용에 따라 각 동적 div의 높이가 증가한다고 가정합니다.

사용할 수도 있습니다.

 display: inline-block;

내 것은 이것으로 작동했습니다.

언급URL : https://stackoverflow.com/questions/9537838/div-height-100-and-expands-to-fit-content