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

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 요소가 플로팅 될 때 발생합니다. 문제 의 최신 해결책 은 다음과 같습니다 .

In your CSS file write the following class called .clearfix along with the pseudo selector :after

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

Then, in your HTML, add the .clearfix class to your parent Div. For example:

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

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.

Source: Blog of Lisa Catalano and Chris Coyier

---

If you just leave the height: 100% and use display:block; the div will take as much space as the content inside the div. This way all the text will stay in the black background.

---

Try this:

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

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

IE6 and earlier versions do not support the min-height property.

I think the problem is that when you tell the body to have a height of 100%, it's background can only be as tall as the hieght of one browser "viewport" (the viewing area that excludes the browsers toolbars & statusbars & menubars and the window edges). If the content is taller than one viewport, it will overflow the height devoted to the background.

This min-height property on the body should FORCE the background to be at least as tall as one viewport if your content does not fill one whole page down to the bottom, yet it should also let it grow downwards to encompass more interior content.

---

Old question, but in my case i found using position:fixed solved it for me. My situation might have been a little different though. I had an overlayed semi transparent div with a loading animation in it that I needed displayed while the page was loading. So using height:auto / 100% or min-height: 100% both filled the window but not the off-screen area. Using position:fixed made this overlay scroll with the user, so it always covered the visible area and kept my preloading animation centred on the screen.

---

This question may be old, but it deserves an update. Here is another way to do that:

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

---

Just add these two line in your css id #some_div

display: block;
overflow: auto;

After that you will get what your are looking for !

---

I'm not entirely sure that I've understood the question because this is a fairly straightforward answer, but here goes... :)

Have you tried setting the overflow property of the container to visible or auto?

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

Adding that should push the black container to whatever size your dynamic container requires. I prefer visible to auto because auto seems to come with scroll bars...

---

Even you can do like this

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

This will include your each dynamic div as per the content. Suppose if you have a common div with class it will increase height of each dynamic div according to the content

---

ok I tried something like this

body (normal)

MainDiv (where all the content goes):Display:table;overflow-y:auto

그것을 작성하는 정확한 방법은 아니지만 주 div 디스플레이를 테이블로 만들면 확장되고 스크롤 막대가 나타납니다.

---

나는 몇 가지 답변을보고 결합했습니다. 여기있어:

#some-div {
    overflow:scroll;
    display:block;
    min-height:100%;
}

이 답변은 현재 지원되는 답변이 오버플로에 대한 자동 옵션 (일부 브라우저의 스크롤과는 다름)을 켜므로 가장 효과적입니다. 또한 높이를 터치 할 수없는 허용 된 답변과 달리 최소 높이를 설정할 수 있습니다.

---

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

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

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