콘텐츠가 없어도 DIV 블록이 페이지 하단으로 확장하도록하려면 어떻게합니까?

StackOverflow https://stackoverflow.com/questions/147528

  •  02-07-2019
  •  | 
  •  

문제

아래 표시된 마크 업에서는 컨텐츠 DIV가 페이지 하단까지 늘리도록하려고하지만 표시 할 컨텐츠가있는 경우에만 확장됩니다. 내가 이것을하고 싶은 이유는 내용이 표시되지 않더라도 수직 테두리가 여전히 페이지 아래에 나타나기 때문입니다.

여기, 내 것이요 HTML:

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

그리고 내 CSS:

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
도움이 되었습니까?

해결책

귀하의 문제는 DIV의 높이가 100%가 아니라 주변 컨테이너가 아니라는 것이 아닙니다. 이것은 내가 사용하고 있다고 생각하는 브라우저에서 도움이 될 것입니다.

html,body { height:100%; }

패딩과 여백을 조정해야 할 수도 있지만, 이렇게하면 90%의 길을 얻을 수 있습니다. 모든 브라우저에서 작동하도록 해야하는 경우 약간 엉망이되어야합니다.

이 사이트에는 몇 가지 훌륭한 예가 있습니다.

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

나는 또한가는 것이 좋습니다 http://quirksmode.org/

다른 팁

나는 페이지 하단에 바닥 글을 붙이는 것에 지옥에 빠지지 않고 제목에서 직접 질문에 대답하려고 노력할 것입니다.

사용 가능한 수직 브라우저 뷰포트를 채우는 콘텐츠가 충분하지 않은 경우 DIV를 페이지 하단으로 확장하십시오.

데모 (프레임 핸들을 드래그하여 효과를 확인) : http://jsfiddle.net/nn7ky
(거꾸로 : 깨끗하고 간단합니다. 단점 : Flexbox가 필요합니다. http://caniuse.com/flexbox)

HTML :

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS :

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

TA -DA- 또는 나는 너무 졸려

다음 CSS 규칙을 가지고 놀아보십시오.

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

페이지에 맞게 높이를 변경하십시오. 크로스 브라우저 호환성에 대해 높이가 두 번 언급됩니다.

당신은 그것을 다소 해킹 할 수 있습니다 최소층 선언

<div style="min-height: 100%">stuff</div>

Ryan Fait의 "스티커 바닥 글"솔루션을 사용해보십시오.

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

IE, Firefox, Chrome, Safari 및 Opera에서도 작동하지만 테스트하지 않았습니다. 훌륭한 해결책입니다. 구현하기가 매우 쉽고 신뢰할 수 있습니다.

Min-Height 속성은 모든 브라우저에서 지원되지 않습니다. 더 긴 페이지에서 높이를 확장하려면 #Content가 필요하면 높이 속성이 짧아집니다.

약간의 해킹이지만 너비의 너비와 #Content Div 내부에 1000px의 높이를 가진 빈 DIV를 추가 할 수 있습니다. 이로 인해 콘텐츠는 최소 1000px 높이가되며 필요할 때 더 긴 콘텐츠가 높이를 확장 할 수 있습니다.

순수한 CSS만큼 우아하지는 않지만 작은 자바 스크립트는이를 달성하는 데 도움이 될 수 있습니다.

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

노력하다:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

아직 테스트하지 않았습니다 ...

고정 된 높이의 끈적 끈적한 바닥 글 :

HTML 체계 :

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS :

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

문제는 HTML 채우기를 100%로 만드는 것만으로도 문제가 해결 될 것이라고 생각합니다. Body는 HTML의 100%를 채우지 만 HTML은 화면의 100%를 채우지 않습니다.

시도해보십시오 : 

html, body {
      height: 100%;
}

노력하다 http://mystrd.at/modern-clean-css-sticky-footer/

위의 링크는 다운되었지만이 링크 https://stackoverflow.com/a/18066619/1944643 괜찮습니다. :디

데모:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

또한 당신은 이것을 좋아할 수도 있습니다 : http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-fixels.htm

그것은 당신이 요구 한 것이 아니지만, 당신의 요구에도 적합 할 수도 있습니다.

코드가 없지만 높이의 조합을 사용하여 한 번도이 작업을 수행했습니다 : 1000px와 마진 바닥 : -1000px; 시도해보십시오.

레이아웃의 작동 방식에 따라 <html> 요소는 항상 뷰포트의 높이입니다.

스타일 시트 (CSS) 만 사용하여이를 달성 할 수 없습니다. 일부 브라우저는 허용되지 않습니다

height: 100%;

브라우저 창의 관점보다 높은 값으로.

JavaScript는 가장 쉬운 크로스 브라우저 솔루션이지만 깨끗하거나 아름다운 솔루션은 아닙니다.

요소 자체와 부모의 최소값 속성에 "VH"길이 장치를 사용할 수 있습니다. IE9 이후 지원됩니다.

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS :

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

가장 큰 표준을 최고로 구현하지는 않지만 스팬에 대한 DIV를 변경할 수 있습니다 ... 권장 할 수 없지만 빠른 수정 = P =).

나는 이것이 최선의 방법이 아니라는 것을 알고 있지만 헤더, 메뉴 등을 엉망으로 만들지 않고는 알아낼 수 없었습니다. 그래서 .... 나는 그 두 컬럼에 테이블을 사용했습니다. 빠른 수정이었습니다. 필요 없음;)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top