내용에 기반한 중간 컨테이너의 자동 높이

내용을 반영하기 위해 중간 div의 높이가 변경되는 상자를 만들고 싶습니다. 중간 콘텐츠는 <li> '을 포함하며 한 페이지에서 다른 페이지까지 높이가 다를 수 있습니다. 간단한 다이어그램 :내용에 기반한 중간 컨테이너의 자동 높이

[-- 1. fixed --] 
[-- 2. flex --] 
|-- flex --| 
|-- flex --| 
[-- flex --] 
[-- 3. fixed --]

문제는 항상 전체 높이가 있고 콘텐츠 다음, 그 위에 흐름 초과에서 패드에 중간 부분을 사용할 수 있도록 세 번째 섹션이 필요하다. 이 순간에 내가 가지고있는 마크 업입니다 (고정 1. 상단이고, 2는 중간이고 3. 바닥입니다) :

<div class="box"> 
    <div class="top"> 
     <h4>Title</h4> 
    </div> 
    <div class="middle"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
      <li>Item 5</li> 
     </ul> 
    </div> 
    <div class="bottom"></div> 
</div>

와 CSS의 가장 좋은 방법은 무엇

.top { 
    background: url('/img/box_top.png') no-repeat; 
    height: 10px; 
} 

.middle { 
    background: #000; 
} 

.bottom { 
    background: url('/img/box_fot.png') no-repeat; 
    height: 150px; 
}

콘텐츠에 따라 높이를 조정하려면 가운데 div를 가져 오는 중입니까?

출처

2012-09-03 xylar

중간 div 인 경우 콘텐츠를 수용하기 위해 자동으로 높이가 조정됩니다. –

@BillyMoat 아, 잠깐, 내 질문을 다시 말해야 해! 맨 아래 클래스의 배경 이미지가 항상 100 % 높이가되어야하며 상단에 내용을 표시해야합니다. 그냥 해결 했어. – xylar

질문에 배경 이미지에 대한 단어가 하나도 없습니다 ... – feeela

BillyMoat이 내 원래 질문의 결함을 지적한 후에 해결했습니다.

높이와 일치시키기 위해 하단에 음수 여백 <div>을 추가했습니다.

.bottom { 
    background: url('/img/box_footer.png') no-repeat; 
    margin: -150px 0 0px 0; 
    height: 150px; 
}

출처

2012-09-03 10:59:56 xylar

내용에 기반한 중간 컨테이너의 자동 높이

답변

관련 문제