콘텐츠가 없어도 DIV 블록을 페이지 아래쪽으로 강제로 확장하려면 어떻게합니까?

190

아래 표시된 마크 업에서 content 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;
}
css  html  border 
— 면도칼
소스
더 많은 콘텐츠가 있고 페이지에 맞을 수 있다면 어떻게 하시겠습니까? 어떤 브라우저에 관심이 있습니까?
— drs9222

답변:

116

귀하의 문제는 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/를 방문하는 것이 좋습니다.

— 제이슨 에르난데스
소스
47
이 솔루션은 스크롤되는 페이지에 적합하지 않습니다.
— jbranchaud
3
CSS에서 최소 높이 속성이 그를 도움이 될 것 ... 같아요
— Alfabravo
1
흥미롭게도 이것은 스크롤 문제를 일으키는 것이 아니라 스크롤 문제를 분류했습니다
— Alan Macdonald
최신 버전의 크롬에서는 작동하지 않습니다.
— HelloWorldNoMore
49

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

사용 가능한 세로 브라우저 뷰포트를 채울 내용이 충분하지 않은 경우 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;
}

따다-아니면 너무 졸려

— 기마
소스
14
우리 중 일부는 "현대"브라우저 만 지원하기에 충분히 운이 좋으므로 이것이 나에게 매우 유용했습니다. 고마워 Gima. 나는 이런 식으로 여러 가지 방법을 시도했지만 항상 다양한 미묘한 방식으로 깨졌습니다. 이것은 훨씬 낫다. 여전히 왜 이런 식으로 작동하는지 이해하지 못합니다.
— Chris Nicola
1
Flexbox 요소는 내용 영역을 여러 요소로 나누려고합니다. 내가 제공 한 솔루션은 1) div 축소 거부 및 2) .div2 증가를 통해 작동합니다. 따라서 div는 내용을 숨기기 위해 축소되지 않으며 .div2 만 확장 할 수 있습니다.
— Gima
따라서 Firefox에서 발생했던 문제가 수정되었습니다. 브라우저에서 내용이 여전히 너무 컸습니다. 불행히도 Chrome에서는이 문제만으로는 해결되지 않습니다. 그러나 여백과 패딩을 0으로 설정해도됩니다.
— Michael Scheper
이것은 정답입니다. 최소 높이 : 100 %는 부모 컨테이너에 더 이상없는 경우에만 작동하며 확장 요소 위의 형제의 높이를 알 수없는 경우 calc는 실제로 도움이되지 않습니다
— zakius
이 문제로 어려움을 겪고 몇 시간이 지나면 이것이 실제로 나를 위해 고친 유일한 솔루션입니다. 각 부분의 기능에 대한 작은 설명 만 누락되었습니다. 어쨌든 @Gima에게 감사합니다.
— pylund
18

다음 CSS 규칙으로 놀아보십시오.

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

페이지에 맞게 높이를 변경하십시오. 브라우저 간 호환성을 위해 높이를 두 번 언급했습니다.

— 케빈 읽기
소스
이것은 작동하지만 최소 높이를 600px 이상으로 늘리면 스크롤이 생성된다는 것을 알았습니다. 왜 이런 일이 일어나고 있는지 아십니까?
— Siddharth Patel
1
@SiddharthPatel #content div가 부모를 오버플로하기 때문에. 따라서 #content div의 부모가 overflow : auto 또는 overflow : hidden css 값을 갖도록 설정하고 스크롤하기보다는 확장 / 오버플로해야합니다. 아마 오히려 :) 의견보다 새로운 질문 다음과 같은 질문을 제기하는 것이 더 있을까
— 콜트 매코맥
각 답변의 방법을 시도한 후에는 이것이 유일한 방법입니다. 페이지의 높이와 일치하도록 높이 값을 조정해야하기 때문에 완벽하게 작동합니다. 그러나 모든 브라우저에서 동일하게 작동합니다.
— TARKUS
이 답변에 감사드립니다. 간단하고 여러 플랫폼에서 잘 작동합니다. 나는 실제로 약 1 년 전에 그것을 깨닫지 않고 전에 이것을 사용했습니다.
— vedi0boy
4

Ryan Fait의 "Sticky Footer"솔루션을 사용해보십시오.

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

IE, Firefox, Chrome, Safari 및 Opera에서도 작동하지만 테스트하지는 않았습니다. 훌륭한 솔루션입니다. 구현이 매우 쉽고 안정적입니다.

— 안 지산
소스
7
링크 다운! 링크 다운!
— codemirror
3
여기에 우리의 타락한 homies들이 있습니다
— 아브라함 브룩스
1
— c24w
3

일부 브라우저에서는 최소 높이 속성을 지원하지 않습니다. 긴 페이지에서 높이를 확장하기 위해 #content가 필요한 경우 height 속성은 짧게 자릅니다.

약간의 해킹이지만 #content div 안에 너비가 1px, 높이가 1000px 인 빈 div를 추가 할 수 있습니다. 그러면 콘텐츠가 최소 1000px 이상이되고 필요한 경우 더 긴 콘텐츠가 높이를 늘릴 수 있습니다.

— 유전자
소스
3

순수한 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>
— 아담 프랑코
소스
3

시험:

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

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

— 스테파니
소스
3

고정 높이의 스티커 바닥 글 :

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;
}
— 데이비드 호락
소스
2

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>
— 비니 시우스 호세 라 토레
소스
1
@ codemirror 덕분에 방금 작동하는 다른 링크로 주석을 편집했습니다.
— Vinicius José Latorre 2018 년
1

"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를 늘입니다.
— jansmolders86
1

html을 100 % 채우는 문제가 해결 될 것이라고 생각합니다. 본문은 HTML의 100 %를 채우지 만 HTML은 화면의 100 %를 채우지 않을 수 있습니다.

시도해보십시오 : 

html, body {
      height: 100%;
}
— 데이비드 마르 시엘
소스
0

레이아웃의 작동 방식에 따라 <html>요소 의 배경을 설정하여 벗어날 수 있습니다. 요소는 항상 뷰포트 높이 이상입니다.

0

스타일 시트 (CSS) 만 사용하여이 작업을 수행 할 수 없습니다. 일부 브라우저는 허용하지 않습니다

height: 100%;

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

Javascript는 언급했듯이 깨끗하거나 아름다운 것이 아닌 가장 쉬운 크로스 브라우저 솔루션입니다.

— 남자 이름
소스
-2

나는 이것이 최선의 방법은 아니라는 것을 알고 있지만 헤더, 메뉴 등의 위치를 ​​엉망으로 만들지 않고 이해할 수 없었습니다. 그래서 .. 나는 그 두 열에 테이블을 사용했습니다. 빠른 수정이었습니다. JS가 필요하지 않습니다;)

— 향하게 하다
소스
-2

최고의 표준을 구현하는 최선의 방법은 아니지만 SPAN의 DIV를 변경할 수 있습니다. 권장하지는 않지만 빠른 수정 = P =)

— 메타 파니 엘
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.