div가 전체 높이를 확장하려면

80

div를 전체 높이로 확장하는 데 사용할 수있는 방법이 있습니까? 나는 그것에 끈적한 바닥 글도 있습니다.

다음은 웹 페이지입니다. 웹 사이트가 삭제되었습니다 . 제가 말하는 중간 부분은 CSS 값이있는 중간 콘텐츠 인 흰색 div입니다.

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

네, 분명히 height:100%작동하지 않았습니다. 또한 모든 상위 컨테이너에는 높이가 설정되어 있습니다.

일반적인 구조는 다음과 같습니다.

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

css xhtml html

— 곰
소스

이것은 매우 일반적인 질문이며 솔루션은 거의 다른 답변에서 찾을 수 있습니다. stackoverflow.com/search?q=css+div+100 또는 stackoverflow.com/search?q=css+div+height

— Ben

2

나는 트롤을 샅샅이 뒤졌고, 그들 대부분은 같은 말을합니다. 나는 말한 것을 적용했지만 여전히 수정되지 않았습니다.

— 곰

1

귀하의 질문이 충분히 명확한 지 잘 모르겠습니다. "midcontainer" 가 "headout"과 "footer"사이의 나머지 공간을 완전히 차지하게 만드는 것을 찾고 있습니까? 확실히 100 %와 같지 않기 때문에

— cesarsalazar

139

CSS에서 html 및 body 태그의 높이를 설정 한 것을 기억하십니까? 이것은 일반적으로 DIV를 전체 높이로 확장하는 방법입니다.


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

— 톰
소스

똑같은 문제가 있는데 몸의 높이를 100 %로 설정했는데 작동하지 않습니다. link 포트폴리오를 클릭하고 카테고리를 선택한 후 썸네일을 클릭하면 슬라이드 쇼가 나타납니다. 슬라이드 쇼의 배경은 높이가 100 %로 설정되어 있지만 전체 페이지로 확장되지 않습니다.

— sodiumnitrate 2014.01.27

2

코드가 정확하다고 생각하지만 질문이 잘못되었습니다. body 및 html 태그를 100 %로 설정했는지 묻습니다. 어떻게 든 html 태그가 다른 방식으로 출력에 영향을 미칠 수 있기 때문에 ...

— Alexis Wilke 2014-02-04

2

어떻게 든 html 100 %는 보이는 화면 만 캡처하는 것 같습니다. chrome devtool을 사용하여 "html"요소를 선택하면 보이는 페이지의 끝에서 끝납니다. 아래로 스크롤하면 더 이상 <html>의 일부가 아닌 것처럼 보입니다

— Nathan H

vh를 사용하는 것은 어떻습니까?

— mfnx

38

도움이 될 수 있습니다. http://www.webmasterworld.com/forum83/200.htm

관련 인용문 :

이를 달성하기위한 대부분의 시도는 속성과 값을 할당하여 이루어졌습니다. div {height : 100 %}-이것만으로는 작동하지 않습니다. 그 이유는 부모가 정의한 높이가 없으면 div {height : 100 %;}는 100 % 퍼센트를 인수 할 것이 없으며 기본값은 div {height : auto;}입니다. auto는 "필요한 값 "는 실제 콘텐츠에 의해 관리되므로 div {height : 100 %}는 콘텐츠가 요구하는 범위까지만 확장됩니다.

문제에 대한 해결책은 부모 컨테이너 (이 경우 body 요소)에 높이 값을 할당하여 찾을 수 있습니다. 신장 100 %를 포함하도록 몸을 stlye 작성하면 필요한 값이 제공됩니다.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

— 브라이언 클래퍼
소스

2

안녕하세요, 모든 상위 컨테이너에는 height:100%.

— 부담

2

@Shamil, html 태그를 포함한 모든 부모? 그것은 당신의 문제 일 수 있습니다. 나는 종종 그래픽 태그로서의 html 태그를 잊어 버립니다.

— Alexis Wilke 2014

@AlexisWilke 예, 그랬습니다-드물게 HTML 태그를 포함하지 않습니다

— bear

3

놀랍게도 양식 태그 포함

— Adam

핵심 요소는 신체와 HTML 태그에 100 % 높이

— luismesas

9

이것은 오래된 질문입니다. CSS가 진화했습니다. 이제이 vh(뷰포트의 높이) 단위, 새로운 레이아웃 등의 옵션 flexbox또는 CSS grid청소기 방법으로 고전적인 디자인을 달성하기는.

— Frank Lämmer
소스

2

또한 html과 본문의 높이를 100 %로 설정하면 저에게했던 것처럼 모든 것이 더 지저분해질 경우 다음이 저에게 효과적이었습니다.

height: calc(100vh - 33rem)

- 33rem은 우리가 전체 높이, 즉, 100vh을하려는 한 후 오는 요소의 높이입니다. 높이를 빼서 오버플로가 없는지 확인하고 항상 반응합니다 (px 대신 rem으로 작업한다고 가정).

— Joehat
소스

height: calc(100vh -33rem)잘못된 CSS가 될 것이므로 음수 기호가 값에 닿는 곳에서 하지 마십시오 . 또한 33rem은 픽셀 값으로도 대체 될 수 있습니다.

— Rich Finelli 20.07.30

1

높이를 100 %로 설정해도 작동하지 않으면 div에 대해 min-height = 100 %를 시도하십시오. 여전히 html 태그를 설정해야합니다.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

— 디미트리 스 크레 메지 스
소스