왼쪽 열이 줄을 서서 내리고 있습니다.

저는 지금 거의 3 일 동안 제 머리를 치고있었습니다. 나는 3col 뻗기에 관하여 기사의 짐을 읽고, 명확하고 절대 위치 및 관계 (많은 모순)를 사용하여 놓았다왼쪽 열이 줄을 서서 내리고 있습니다.

나는 나가 고려하는 무엇을, 아주 간단한 배치한다. 왼쪽에 탐색 div가 필요합니다. 왼쪽에 두 개의 div와 바닥 글이 있습니다.

<table border="1"> 
<tr> 
    <td rowspan="2"> 
     left nav. 
    </td> 
    <td>right 1</td> 
</tr> 
<tr> 
    <td>right 2</td> 
</tr> 
<tr> 
    <td colspan="2">footer</td> 
</tr>

그러나 나는 왼쪽 DIV 아래 모든 방법을 스트레칭 얻을 수 없습니다 : 내가 테이블을 사용 한 경우는 다음과 같이 될 것이다. 아래는 가장 가까운 솔루션입니다. 실제로 실제로 ie7에서는 작동하지만 오페라 나 파이어 폭스에서는 작동하지 않는 것 같습니다.

나는 이것이 부모 div의 길이를 확장하지 않는 float에 의한 것이라고 생각합니다. 그래서 왼쪽 div는 부모가 그것보다 작다고 생각합니다.

도움이 될 것입니다.

<html> 
<head> 
<style type="text/css"> 
body 
{ 
height:100; 
} 



.main{ 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    width: 100%; 
} 


.leftDiv 
{ 

    position: relative; 
    float: left; 
    width: 18%; 
    height: 100%; 
    background-color: aqua; 
} 

.topRight 
{ 
    position: relative; 
    float: right; 
    width: 80%; 
    background-color: green; 
} 
.bottomRight 
{ 
    position: relative; 
    float: right; 
    width: 80%; 
    background-color: red; 
} 

.footer 
{ 
    width: 100%; 
    float: right; 
    background: blue; 
    position: relative; 
} 

</style> 
</head> 

<body> 

<div class="main"> 

    <div class="leftDiv">This should Stretch all the way down the left side</div> 
    <div class="topRight">This should be over to the right at the top</div> 
    <div class="bottomRight">This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/> 
lotst of text here<br/> </div> 

    <div class="footer">footer text. This should be at the bottom of the screen under the main content.<br/></div> 




</div> 

</body> 
</html>

출처

2010-12-09 AidanO

나는 조금 청소의 자유를했습니다. 또한 footer div를 주 div의 바깥쪽에 넣습니다.

이 레이아웃에서는 주 div의 내용에 따라 높이가 결정됩니다. 나는 모든 내용에 왼쪽 여백을 20 %로 지정하고이 마진 위에 왼쪽 div를 절대 배치했습니다. 메인 div가 왼쪽 div의 부모이기 때문에 왼쪽 div의 높이를 100 %로 설정하면 주 div (콘텐츠의 높이가있는 위치)의 높이까지 늘어납니다.

또 다른 (다소 깨끗한) 옵션은 왼쪽 div의 height: 100% 대신 bottom: 0px을 설정하는 것입니다. 그것은 컨테이너의 하단 (메인 div) 바닥을 정렬하지만 ie6에서 작동하지 않습니다 생각합니다.

.topRight, .bottomRight { 
    margin: 0px 0px 0px 20%; 
} 

.main { 
    height: 100%; 
    position: relative; 
} 


.leftDiv {   
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 18%; 
    bottom: 0px; 
    background-color: aqua; 
} 

.topRight { 
    background-color: green; 
} 

.bottomRight { 
    background-color: red; 
} 

.footer { 
    background: blue; 
}

http://jsfiddle.net/Z44HK/

PS : 나는 그들이 진짜 예쁘게 때문에이 </br> 태그가 테스트 용으로 만 사용됩니다 바랍니다. CSS는 html에서 이러한 종류의 프리젠 테이션 태그를 제거하기 위해 고안되었습니다.

출처

2010-12-09 17:42:54 Jan

감사합니다 Jan, 지금 검토하여 작동 여부를 확인합니다. 나는 jsfiddle도 좋아하고, 그걸 가지고 놀아야한다. :) – AidanO

안녕하세요 1 월,이 답변은 jsfiddle에서 작동하지만 실제 브라우저에서는 작동하지 않습니다. 나는 오페라, 파이어 폭스 및 ie7에서 그것을 시도했다. "Height : 100 %"를 leftDiv에 추가하면 ie7에서는 작동하지만 다른 두 브라우저에서는 작동하지 않습니다. ( – AidanO

이 예제는 Chrome, Firefox ie8 및 ie7에서 작동합니다. 적어도 내 컴퓨터에서는 http : // www.mediafire.com/?c87m9ec1c8dd12h – Jan

이것은 무엇을 의미합니까?

body 
{ 
height:100; 
}

난 당신 말은 생각 :

html, body 
{ 
    height: 100%; 
}

브라우저는 100이 무엇인지 말할 수 없다. 마치 쌀을 사는 것과 같습니다. 100 쌀은 얼마입니까? 100 마리? 파운드? 나는 모른다. 당신의 단위를 기억하십시오;)

출처

2010-12-09 17:31:57 Blender

블렌더는 당연한 의견이지만 답변입니까? – AidanO

왼쪽 열이 줄을 서서 내리고 있습니다.

답변

관련 문제