내용으로 div의 높이를 확장하십시오.

376

이 중첩 된 div가 있고 내부의 DIV를 수용하기 위해 확장 할 메인 컨테이너가 필요합니다 (높이).

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

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

CSS는 이렇습니다 :

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

내가 가진 문제는 #main_content모든 내부 div를 수용하기 위해 늘어나지 않고 결과가 계속 배경에 도달한다는 것입니다.

위 시나리오를 고려하여이 문제를 어떻게 해결할 수 있습니까?

css  height 
— 패트릭
소스
5
여러분 모두 답을 주셔서 감사합니다! 내 특정 사례에 대한 가장 좋은 해결책은 BR을 하드 코딩하여 양쪽을 지우는 것입니다 (Jennyfofenny와 Ricebowl 덕분에) 어쨌든 다른 솔루션도 효과가 있습니다. 해당 div의 너비를 자식 div의 크기로 줄였습니다). 이제 내가 궁금해하는 초보자입니다.이 솔루션에는 단점이 있습니까, 아니면 무관심하게 사용할 수 있습니까? (예 : 어쩌면 그들 중 하나가 IE6에서 작동하지 않거나 이와 유사한 ...)
— patrick
1
@Patrick, 질문을 추가로 개발하려면 '질문'링크 (질문의 현재 텍스트 아래)를 클릭하고 추가 질문을 추가하십시오. 컨벤션은 다음과 같은 것을 사용하도록 제안 <strong>Edited</strong>$Reason_for_revising_question...합니다. 주요 변경 또는 추가 사항이있는 경우 변경 사항을 반영하기 위해 질문 제목을 변경해야 할 수도 있습니다. =)
— David는 Monica를
4
또한 div태그를 닫지 않았습니다 id='container'. 일부 문제가 발생할 수 있습니다.
— Batkins 2016 년
@ Patrick, .clear클래스에 대한 CSS도 없습니다 . 잊었습니까, 아니면 원래 코드에 있습니까? @jennyfofenny가 답변에서 언급했듯이 그 .clear수업 br은 매우 중요합니다.
— Cannicide

답변:

280

div를 닫기 clear:both전에 a를 강제해야합니다 #main_content. 아마도 div <br class="clear" />;로 옮기고 #main_contentCSS를 다음과 같이 설정합니다.

.clear { clear: both; }

업데이트 : 이 질문에는 여전히 많은 양의 트래픽이 발생하므로 CSS3에서 Flexible boxes 또는 Flexbox라는 새로운 레이아웃 모드를 사용하여 현대적인 대안으로 답변을 업데이트하고 싶습니다 .

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}
<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>
스 니펫 확장

대부분의 최신 브라우저는 현재 Flexbox 및 뷰포트 단위를 지원 하지만 이전 브라우저에 대한 지원을 유지해야하는 경우 특정 브라우저 버전의 호환성을 확인하십시오.

— 제니 포프 니
소스
4
CSS clear 속성에 대한 w3schools 기사는 다음과 같습니다 . 기본적으로 clear는 clear가 적용되는 요소가 흐름의 수레 아래에서 시작 함을 의미합니다 (왼쪽 만, 오른쪽 만 또는 둘 다).
— jennyfofenny
230

이 시도: overflow: auto;

내 문제에 효과적이었다 ..

— sipőcz pter
소스
10
+1,이 솔루션은 우아하며 페이지에 보이지 않는 태그를 추가하지 않습니다. 이 바이올린을 참조하십시오 jsfiddle.net/XmKrm/1
— 나빌 Kadimi
5
오버플로 자동은 나를 위해 잘 작동했습니다. 참고로 오버플로 자동 컨테이너의 높이가 내부 내용보다 작 으면 스크롤 막대가 추가됩니다. 오버플로와 함께 크기를 늘리거나 높이를 설정하십시오.
— Bryan Myers
@ Roozbeh15 display: block;함께 추가
— BadAtPHP
2
가장 쉽고 쉬운 솔루션 ... 당신은 내 하루를 구했습니다. 감사합니다
— 쉬얍 코탁
거룩한 헛간이 훌륭하게 작동했습니다. 누구나 왜 이것이 효과가 있었는지에 대한 메커니즘을 설명하고 싶습니까?
— Merkurial
86

다음을 추가하십시오.

overflow:hidden;
height:1%;

당신의 주요 사업부에. <br />클리어를위한 여분의 필요성을 제거합니다 .

— 새긴 ​​금
소스
와! 그것은 내가 기대했던 것과 정확히 반대되었습니다! 오버플로 : 숨김 = 내용에 맞게 확장! 나는 결코 그것을 추측하지 않았을 것입니다!
— mulllhausen
예, 이것은 저에게도 효과가 있었으며 그 이유를 완전히 이해하지 못했습니다. '높이 1 %'와 '오버플로 숨김'이 작동하는 이유에 대한 설명이 있습니까?
— acarlon
1
실제로 높이가 설정되지 않은 경우 어떻게 작동하고 왜 작동합니까? 오버플로 숨김은 왜 모든 것을 숨기지 않고 (cos 높이가 0) 자체를 확장합니까? 설명이 있거나 믿거 나 행복합니까?
— Max Yari
1
오버 플로우 : 가죽 스크롤바를 숨겨하지만 블록의 크기 유지
— authentictech
'overflow : hidden'으로 나를 위해 일했지만 'overflow : auto'도 작동했으며 스크롤 막대를 표시하지 않았습니다.
— Whirlwind991
60

다른 방법으로 일부 상황에서 유용 할 수있는 시도 할 수도 있습니다 

display:table;

jsFiddle

— 으
소스
24

난 그냥 사용할거야

height: auto;

귀하의 사업부. 예, 조금 늦었다는 것을 알고 있지만 이것이 있다면 누군가 도움이 될 것이라고 생각했습니다.

— 찰스
소스
height: auto;아래의 모든 항목이 맨 위로 이동합니다. 기본 콘텐츠 div에서이 속성을 사용하면 페이지의 바닥 글이 위로 이동하여 머리글에 닿고 콘텐츠 div와 겹칩니다.
— Aaron Franke
1
이것이 나를위한 해결책이었습니다. 감사!
— Nik Hammer-Ellis
14

다음과 같이 작동합니다.

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
— 조향
소스
overflow : auto 추가했지만 width : 100 %도 추가하면 div (#main_content)가 부모 div보다 약간 커집니다. 왜 그런지 몰랐어!
— patrick
2
패딩은 지정된 너비와 함께 계산되기 때문에 요소의 너비는 100 % + 5px 왼쪽 패딩 + 5px 오른쪽 패딩
— NickV
1
오버플로 : 자동; 나를 위해 일한, 정말 감사합니다.
— Cosco Tech
8

display:inline-blockCSS가 연결된 span 태그를 사용하십시오 . 당신이 포함되지 않는 경우는 다음 CSS를 사용하고 많은 방법으로 사업부처럼 조작 할 수 있지만, width또는 height그것의 내용에 따라 확장과 후퇴한다.

희망이 도움이됩니다.

— 다크 마크
소스
당신의 희망은 효과가 있었다 : 그것은 적어도 나를 도왔다! :) Btw, 나는 내 요소를 div(대신) 으로 남겨 두 span었지만 display: inline-block여전히 내 경우 (크롬)에서 일했습니다.
— snapfractalpop
6

일반적으로 나는 clear:both의 마지막 자식 요소에 규칙을 적용하여 해결할 수 있다고 생각 합니다 #items_list.

다음 중 하나를 사용할 수 있습니다.

#items_list:last-child {clear: both;}

또는 동적 언어를 사용하는 경우 루프가 목록 자체를 생성하는 모든 요소에서 생성 된 마지막 요소에 추가 클래스를 추가하면 html에서 다음과 같은 결과가 발생합니다.

<div id="list_item_20" class="last_list_item">

그리고 CSS

.last_list_item {clear: both; }
— 데이비드는 모니카 복직을 말한다
소스
6

이 문제는 Parent Div의 Child 요소가 플로팅 될 때 발생합니다. 문제 의 최신 해결책 은 다음과 같습니다 .

CSS 파일 에서 의사 선택기와 함께 .clearfix 라는 다음 클래스를 작성하십시오 . 

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

그런 다음 HTML에서 .clearfix 클래스를 부모 Div에 추가하십시오 . 예를 들면 다음과 같습니다.

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

항상 작동해야합니다. 클래스 이름을 .clearfix 대신 .group 으로 호출 하면 코드의 의미가 향상됩니다. 큰 따옴표 ""사이 에 Content 값에 점 또는 공백을 추가 할 필요는 없습니다 . 또한 오버플로 : auto; 문제를 해결할 수 있지만 스크롤 막대 표시와 같은 다른 문제가 발생하므로 권장하지 않습니다.

출처 : Lisa Catalano와 Chris Coyier의 블로그

— 이프 티 마흐무드
소스
5

#main_contentdiv에 float 속성을 추가하면 float 된 내용을 포함하도록 확장됩니다.

— 레이
소스
감사합니다 Ray, div를 너비 (400px) 인 콘텐츠의 크기 (#items_list)로 축소했지만 작동했습니다. #main_content를 전체 너비로 유지할 수 있다면 솔루션이 정말 좋을 것입니다.
— patrick
@Ray 2와 약간 년 후에 이것은 비슷한 문제로 잠재적 인 두통을 막았습니다. 감사합니다!
— John H
4

무엇이든하기 전에 CSS 규칙을 확인하십시오.

{ position:absolute }

존재하는 경우 제거하고 필요하지 않습니다.

— 오날 비
소스
2
"절대 위치 요소는 흐름에서 제거되어 다른 요소에 의해 무시되므로 절대 위치 요소에 따라 부모 높이를 설정할 수 없습니다." stackoverflow.com/questions/12070759/…
— Federico
4

부동 요소는 부모 요소 내부의 공간을 차지하지 않습니다. 따라서 자식 요소가 플로팅 된 요소에 높이가 명시 적으로 제공되지 않으면 부모 요소가 축소되어 자식 요소의 치수를 허용 overflow:hidden;하지 않는 것처럼 보이며 주어진 자식 요소 가 화면에 나타나지 않을 수도 있습니다. 이 문제를 처리하는 방법에는 여러 가지가 있습니다.

  1. 으로 부유 요소 아래에 다른 요소를 삽입 clear:both;속성 또는 사용 clear:both;에 :after떠내려 요소.

  2. 사용 display:inline-block;또는 flex-box대신 float.

— 아 푸르 프 스리 바스타 바
소스
3

이 작동하는 것 같습니다

html {
 width:100%;
 height:auto;
 min-height:100%
}

화면 크기가 최소가되며 컨텐츠가 확장되면 커집니다.

— 물질 MX
소스
2

section화면 높이의 100 %로 설정 한 태그가 있는 프로젝트에 Bootstrap을 추가했습니다 . 프로젝트를 반응 형으로 만들 때까지 잘 작동했습니다.이 시점에서 jennyfofenny 의 답변 중 일부를 빌려서 화면 크기가 작은 화면에서 변경되었을 때 섹션 배경이 내용의 배경과 일치했습니다.

내 새 sectionCSS는 다음과 같습니다.

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

특정 색상의 섹션이 있다고 가정 해 봅시다. 을 사용 min-height하면 더 작은 화면으로 인해 섹션의 너비가 줄어들면 섹션의 높이가 확장되고 내용이 섹션 내에 유지되며 배경이 원하는 색상으로 유지됩니다.

— 아드리안
소스
2

전통적인 방법을 사용해 보셨습니까? 주요 컨테이너 높이를 제공하십시오 : 자동

#container{height:auto}

나는 이것을 사용했고 그것은 대부분 나와 함께 일했다.

— 미셸 딤 와테
소스
1

나는 프로젝트에서 이것을 직접 실행하고있다-div의 바닥에서 쏟아져 나온 div 안에 테이블이 있었다. 내가 시도한 높이 수정은 없었지만 이상한 수정을 찾았습니다. 마침표로 마침표를 div의 맨 아래에 배치하는 것입니다. 그런 다음 텍스트의 "색상"을 컨테이너의 배경과 동일하게 스타일을 지정하십시오. 당신이 원하는대로 깔끔하게 작동하고 자바 스크립트가 필요하지 않습니다. 끊김없는 공간은 작동하지 않으며 투명한 이미지도 아닙니다.

분명히 그것을 포함하기 위해 확장하기 위해 테이블 ​​아래에 일부 내용이 있음을 알 필요가있었습니다. 이것이 다른 사람에게 효과가 있는지 궁금합니다.

이것은 디자이너가 테이블 기반 레이아웃에 의존하게 만드는 일종의 것입니다.이 물건을 알아 내고 크로스 브라우저와 호환되도록하는 데 소비 한 시간은 나를 미치게합니다.

— 낸시 헤이스팅스 트루
소스
CSS 로이 작업을 수행 할 수있는 방법이어야하지만, 그것이 무엇인지 전혀 몰랐습니다. 이것은 나를 위해 일했지만 너비를 추가해야했습니다 : 100 %; 높이 : 자동; 최소 높이 : 100 %; 위치 : 상대;
— RationalRabbit
1

나는 이것을 시도했고 효과가 있었다.

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
— 아흐메드 아보 엘라
소스
0

jQuery UI를 사용하는 경우 이미 작업중 인 클래스 <div>가 있습니다. 확장하려는 div의 맨 아래 height:auto;에 클래스를 추가 한 다음 클래스 이름 ui-helper-clearfix를 추가 하거나이 스타일 속성을 사용하여 아래처럼 추가하십시오 :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

확장하려는 div가 아닌 일반 div에 jQuery UI 클래스를 추가하십시오.

— 루카스 올리베이라
소스
0

나는 이것이 일종의 오래된 스레드라는 것을 알고 있지만 이것은 min-heightCSS 속성을 사용하여 깔끔하게 얻을 수 있으므로 나중에 참조 할 수 있도록 여기에 남겨 둘 것입니다.

: 나는 OP를 기반으로 바이올린 여기에 코드를 게시했다 http://jsfiddle.net/U5x4T/1/ 제거하고 내부에있는 div를 추가, 당신은 용기가 팽창을 수행하거나 크기가 감소하는 방법을 알 수 있습니다,

OP 코드에 추가하여이 작업을 수행하는 데 필요한 유일한 것은 다음과 같습니다.

* 메인 컨테이너의 오버플로 (플로팅 div에 필요)

* min-height CSS 속성, 자세한 정보는 여기 ( http://www.w3schools.com/cssref/pr_dim_min-height.asp)를 참조 하십시오.

— 후안 카를로스 알피 사르 친칠라
소스
0

div에 display : inline을 추가하고 높이 내용이 200px의 설정된 div 높이보다 커지면 자동으로 커집니다 (스크롤 항목이 아님).

— 젤
소스
1
이것은 질문에 대한 명확한 대답이 아닙니다. 비고에 대해서는, 코멘트 기능을 사용해주세요.
— ksbg
0

CSS Grid Layout을 사용할 수 있습니다 . 현재 지원 범위가 넓습니다 . caniuse에서 확인하십시오 .

다음은 jsfiddle 의 예 입니다. 또한 수많은 텍스트로 된 예 입니다.

HTML 코드 :

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

CSS 코드 : 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff
— 샤리 코프 블라디슬라프
소스
0

위에 나열된 모든 제안을 거의 시도했지만 아무도 효과가 없었습니다. 그러나 "display : table"은 나를 위해 속였습니다.

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