CSS : 두 개의 콜럼 (고정/유체) - 동일한 높이

이 간단한 작업을 수행하는 가장 좋은 방법은 무엇입니까?CSS : 두 개의 콜럼 (고정/유체) - 동일한 높이

은 왼쪽 열, 고정 폭, 배경은 노란색
주요 열, 화면의 나머지 말을

주요 무한 길이의 텍스트를 포함 할 열, 나는 왼쪽 열이 높은되고 싶어 그 내용이 무엇이든 관계없이 머리글, 바닥 글 없음, 화면 분할이 두 개이지만 왼쪽은 이어야합니다.은 주 공간이 차지하는 모든 공간을 채워야합니다. 아니 자바 스크립트.

감사합니다.

편집 : 없이 배경 이미지 나 마진 값이 엉망이 될 수 있습니까? 나는 괄목할만한 테이블 접근법에서 벗어나려고 노력하고 있지만, 지금까지는 CSS 레이아웃 만이 가장 쉬운 일을 할 때조차도 몇 가지 속임수가 필요하다는 것을 알게되었습니다. 외부 사람이 내가 주 컬럼과 동일한 높이를 갖고 싶어 사이드 바 콘텐츠를 포함하는 것, 그리고 :

출처

2009-11-23 Matteo Riva

doctype.com으로 이동해야합니까? –

@ Josh Pearce : doctype.com은 League of Justice에 있지만, StackOverflow 사이트 제품군과 직접 통합되지 않습니다. 그래서 우리는 그곳으로 이동할 수 없습니다. –

기본적으로 "트릭없이이 작업을 수행 할 수 있습니까?"라는 질문에 대한 대답은 다음과 같습니다. 번호 :

출처

2009-12-04 11:48:36

출처

2009-11-23 18:01:40 powtac

http://www.ejeliot.com/samples/equal-height-columns/example-7.html

나는 보통 두 개의 div가있다 inner div가 기본 열이됩니다.

----------------------------- 
|  -------------------- | 
|  |     | | 
|  |     | | 
|  |     | | 
|  -------------------- | 
-----------------------------

이렇게하면 inner/main div는 outer/sidebar div가 inner/main과 동일한 높이가되도록합니다. 그냥 float:right inner/main div, outer/sidebar div를 width:100%으로 설정하고 inner/main div에 왼쪽 여백이 있음을 지정하여 사이드 바를 허용합니다. margin-left:20%.

<div class="outer"> 
    <div class="inner"> 
    --main content-- 
    </div> 
    --sidebar content-- 
</div>

업데이트 : 미안 해요, 내가 잘못된 장소에 표시된 사이드 함량을 가졌다. 아래에 inner/main div가 있어야합니다. 그러면 inner/main div가 부울 때 오른쪽에 나란히 표시됩니다. 예제 CSS :

div.outer { 
    width: 100%; 
} 

div.inner { 
    margin-left: 20%; /* width of sidebar */ 
    float: right; 
}

출처

2009-11-23 18:08:54

내가 원하는 것을 보여주기 위해 이것을 가져올 수 없다. 스타일 시트의 예제를 제공해 줄 수 있습니까? –

나는 다음과 같이 덧붙이고 싶다고 생각한다 : 신장 : 100 %; div.inner도 마찬가지입니다. – Kzqai

나는 이것이 작동하는지 의심 스럽다. 너비 = 100 %는 바깥 쪽 div를 안쪽 아래로 펀치합니다.이보다 더 많은 것이 필요할 것입니다. – dland

여기에 QUICK 모형이 있습니다. 기본 열은 사용하는 동안 가로로 채워집니다. 이미 왼쪽 열 너비를 알고있는 경우 기본 열 너비를 설정할 수 있습니다.

<html> 
<head> 
<style> 
#leftCol 
{ 
width:350px; 
height:100%; 
float:left; 
background-color:#FFFF33; 
} 
#mainCol 
{ 
width:53%; 
height:100%; 
float:left; 
background-color:#CC0033; 
} 
#wrapper 
{ 
width:100%; 
} 
.clearFix 
{ 
clear:both; 
} 
</style> 
</head> 

<body> 
<div id="wrapper"> 
<div id="leftCol">tfgsrrtgrt 

</div> 
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr 

</div> 
<div class="clearFix"></div> 
</div> 
</body> 
</html>

희망이 있습니다.

출처

2009-11-23 20:23:40 tahdhaze09

브라우저의 너비가 제한되어 있으면 mainCol이 leftCol 밑으로 줄 바꿈되어 바람직하지 않을 수도 있음을 유의하십시오. – dland

정확함. 그것을 잊어 버렸습니다. 그런 다음 어딘가에서 최소 너비가 필요합니다 ... 아마도 # 래퍼 또는 #mainCol? – tahdhaze09

CSS : 두 개의 콜럼 (고정/유체) - 동일한 높이

답변

관련 문제