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

Program / 글쓴이

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에서 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>

답변

도움이 될 수 있습니다. 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%;
}

답변

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

답변

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

height: calc(100vh - 33rem)

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

답변

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

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

#fullHeight{

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

}

답변