div를 공백으로 채우기

두 개의 열을 content div의 측면에 넣고 싶습니다. 문제가있는 부분은 3 부분으로 구성된 열을 원한다는 것입니다. 상단과 하단은 고정 된 높이를 가져야하지만 중간은 콘텐츠 높이에 따라 조정됩니다. 하나 개의 컬럼으로 샘플 봐 :div를 공백으로 채우기

<html><head> 
<style> 
* { border: 1px solid black;} 
#contentWrapper  { width:450px; } 
#leftColumn   { width:100px; float: left; } 
#leftColumnTop  { width:100px; height:50px; background-color: gray; } 
#leftColumnMiddle { background-color: red; } 
#leftColumnBottom { width: 100px; height:50px; background-color: gray; } 
#content   { width: 300px; float: left; } 
#footer    { width: 400px; clear: both; } 
</style> 
</head> 
<body> 
<div id="contentWrapper"> 
<div id="leftColumn"> 
    <div id="leftColumnTop"> </div> 
    <div id="leftColumnMiddle"> </div> 
    <div id="leftColumnBottom"> </div> 
</div> 
<div id="content">content<br> 
here<br>more<br>more<br>more<br>more<br>more<br>more<br> 
</div> 
<div id="footer">footer text</div> 
</div> 
</body> 
</html>

는 내가 원하는 것은 상단과 하단 부분 사이의 공간을 채우기 위해 바닥 글과 붉은 #leftColumnMiddle의 상단에있는 #leftColumnBottom 스틱입니다.

출처

2009-02-03 ya23

고정 된 크기를 사용해야합니까? – rjzii

크기가 고정되어 있지 않으면 어떻게 만들어 질지 모르겠군요. 화면의 %를 사용하면 해당 div의 배경으로 설정된 이미지가 매우 멋진 혼란을 만듭니다. – ya23

이것은 IE6을 제외하고 모두 작동합니다. 그것을 위해 당신은 #leftColumnMiddle

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<style>* { border: 1px solid black;} 
#contentWrapper  { position: relative; float:left; width: 450px; } 
#leftColumnTop  { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; } 
#leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; } 
#leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; } 
#content   { width: 300px; float: left; margin-left: 100px;} 
#footer    { width: 400px; clear: both; } 
</style> 
</head> 
<body> 
<div id="contentWrapper"> 
    <div id="leftColumnTop"> </div> 
    <div id="leftColumnMiddle"> </div> 
    <div id="leftColumnBottom"> </div> 
    <div id="content">content<br> 
    here<br>more<br>more<br>more<br>more<br>more<br>more<br> 
    </div> 
</div> 
<div id="footer">footer text</div> 
</body> 
</html>

에 그리고 주석에 bottom 대신 높이를 설정하는 조건부 주석과 CSS 표현을해야합니다 - 그것은 거의 일, 그 이유는 그래서. ;)

출처

2009-02-03 15:42:20

저주받은 대답을 지운 다음 =) – gnud

일을하는 것처럼 보입니다. 훌륭합니다! 다행히 IE6에 대해서는별로 신경 쓰지 않아도됩니다. – ya23

자랄 필요가있는 분의 신장을 시도하십시오.

출처

2009-02-03 15:41:22

누구나 여전히 Internet Explorer 6에 관심이있는 경우 div가 최소 높이를 지원하지 않습니다. 그것은 모든 주요 브라우저의 최신 버전에 의해 완전히 지원되는 것으로 보이지만, 브라우저 호환성을위한 엄청난 양보자가 아니라면 무시하십시오. –

IE6에서 두 열 모두 동일한 높이 (및)를 사용해야하는 경우 기본적으로 해킹해야합니다.

과거에 사용한 적이있는 해결책은 열 중 하나에 위조 된 여백/패딩을 설정하는 것입니다. 이것은 열의 크기가 커질 수있는 상한선을 알고 있다고 가정합니다 (수천 px 크기 일 수 있음).

이 솔루션의 윤곽은 here입니다. 내가 링크 된 페이지에서 인용

기본적인 방법은 다음과 같이 작동

:

열이

오버 플로우 적용 컨테이너 요소에 싸여해야 역할을 블록 : 컨테이너에 숨겨 소자

패딩 바닥 적용 : $ BIG_VALUE을 [2] $ BIG_VALUE의 그것과 동일하거나 높은 열보다 더 크다 보장하기
충분히 큰 값이다 열 블록에
margin-bottom 적용 : - $ big_value를 열 블록에 적용

출처

2009-02-03 15:58:33 gnud

div를 공백으로 채우기

답변

관련 문제