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

이 중첩 된 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를 수용하기 위해 늘어나지 않고 결과가 계속 배경에 도달한다는 것입니다.

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

답변

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 및 뷰포트 단위를 지원 하지만 이전 브라우저에 대한 지원을 유지해야하는 경우 특정 브라우저 버전의 호환성을 확인하십시오.

답변

이 시도:
overflow: auto;

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

답변

다음을 추가하십시오.

overflow:hidden;
height:1%;

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

답변

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

display:table;

jsFiddle

답변

난 그냥 사용할거야

height: auto;

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

답변

다음과 같이 작동합니다.

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

답변

아주 간단한 방법

부모 DIV에서 :

height: 100%;

매번 나를 위해 일하는