1. 홈
  2. 질의 응답
  3. 두 열 모두 가장 깊은 열과 같은 높이입니까? 나는이 같은 DIV 레이아웃이있는 경우

두 열 모두 가장 깊은 열과 같은 높이입니까? 나는이 같은 DIV 레이아웃이있는 경우

2009-11-22 1 views
2

: 나는이 두 열이 깊은 열의와 같은 높이인지 확인하려면 어떻게두 열 모두 가장 깊은 열과 같은 높이입니까? 나는이 같은 DIV 레이아웃이있는 경우

----------------------------------------------------- 
|   stretchyheader       | 
----------------------------------------------------- 
     |      |    | 
     |      |    | 
     | fixedwidthwide | fixednarrow | 
     |      |    | 
     |      |    | 
     |      | -------------- 
     |      |    
     |      |    
     |      |  patterned   
     |      |  background 
     ----------------------- 
        - footer -

:

는 
<div id="stretchyheader"></div> 
<div id="fixedwidthwide"><div> 
<div id="fixednarrow></div> 
<div id="footer"></div>

어떤 이런 일을 무엇입니까? 기둥 높이는 내용의 양에 따라 유연하며 흰색 배경을가집니다.

출처

2009-11-22 cannyboy

답변

4

매우 간단한 방법은 Faux Columns을 사용하는 것입니다.

이 같은 모습 구조 것이다 :

<div id="stretchyheader"></div> 
<div id="container"> 
    <div id="fixedwidthwide"></div> 
    <div id="fixednarrow></div> 
</div> 
<div id="footer"></div>

을 그리고 당신은 실제로 2 열 각 등 어떤 배경 색상, 테두리를 추가 할 #container에 배경 이미지를 적용합니다.

그것을 날조하지 않고이 작업을 수행하는 CSS 기술이 있습니다,하지만 그들은 훨씬 더 복잡하다 :

출처

2009-11-22 22:56:46 philfreo

2

이 here에서 적응 :

만들기 이 같은 두 개의 고정 된 기둥 주위 용기, 그리고이 CSS 뭔가 : 열 필요 어떤 이유로 동일한 높이로있을 경우에만 필요하다고

#container { 
    float:left; 
    width:[sum of the two columns width]; 
} 
#fixedwidthwide { 
    float:left; 
    width:[whatever]; 
} 
#fixednarrow { 
    float:left; 
    width:[whatever]; 
}

참고. 그렇지 않다면 philfreo의 제안을 따르고 가짜 컬럼을 사용할 수 있습니다.

출처

2009-11-22 23:03:57 nsdel

1

는 기술 OneTrueLayout , 가짜 열 기술 및 CSS 테이블 형식의 디스플레이 기술 포함하여이 문제에 대한 솔루션을 제공하고 있습니다. 표 기능 :

동일 높이 혼성 열에 대한 최상의 해결책은 디스플레이를 사용하는 수단 CSS Tabular Display Technique이다. 이 및 IE8파이어 폭스 2 +,사파리 3+, 오페라 9 + 작동합니다.

CSS의 테이블 형식 표시의 코드 :

html로

<div id="container"> 
    <div id="rowWraper" class="row"> 
      <div id="col1" class="col"> 
       Column 1<br />Lorem ipsum<br />ipsum lorem 
      </div> 
      <div id="col2" class="col"> 
       Column 2<br />Eco cologna duo est! 
      </div> 
      <div id="col3" class="col"> 
       Column 3 
      </div> 
     </div> 
</div>

CSS의 자동 -에 문제가있는 경우에도

<style> 
#container{ 
    display:table; 
    background-color:#CCC; 
    margin:0 auto; 
} 

.row{ 
    display:table-row; 
} 

.col{ 
    display: table-cell; 
} 

#col1{ 
    background-color:#0CC; 
    width:200px; 
} 

#col2{ 
    background-color:#9F9; 
    width:300px; 
} 

#col3{ 
    background-color:#699; 
    width:200px; 
} 
</style>

테이블 셀 너비 확대 table-cell을 사용하여 다른 div를 삽입하고 고정 폭을 지정하면 쉽게 해결할 수 있습니다. 어쨌든 너비가 지나치게 팽창하는 것은 극히 긴 단어를 사용하는 경우에 발생합니다 (누군가 600px long 단어를 사용하는 것으로 의심됩니다) 또는 너비가 테이블 셀의 너비보다 큰 div가 발생합니다.

Faux Column Technique은이 문제의 해결책 일 수 있지만 열의 크기를 조정하려는 경우 배경 타일링 이미지의 크기를 조정해야하며 또한 우아한 해결책이 아닌 경우와 같은 몇 가지 단점이 있습니다.

OneTrueLayout Technique은 극단적 인 큰 높이의 패딩 하단을 생성하고 동일한 거대한 값의 음수 여백을 적용하고 실제 경계 위치를 "일반 논리 위치"로 가져 와서 잘라냅니다. 오버플로가있는 채우기로 생성 된 익스텐트 : 내용 래퍼에 숨김이 적용됩니다. 단순화 된 예는 다음과 같습니다

HTML 파일 : 제 생각에는

<html><head> 
<style> 
.wraper{ 
    background-color:#CCC; 
    overflow:hidden; 
} 

.floatLeft{ 
    float:left; 
} 

.block{ 
    padding-bottom:30000px; 
    margin-bottom:-30000px; 
    width:100px; 
    background-color:#06F; 
    border:#000 1px solid; 
} 
</style> 
</head> 
<body> 
    <div class="wraper"> 
    <div class="block floatLeft">first col</div> 
     <div class="block floatLeft"> 
       Second col<br />Break Line 
     </div> 
    <div class="block floatLeft">Third col</div> 
</div> 
</body> 
</html>

자동 높이 컨테이너 내에서 구현되지 않은 100 % 높이가 큰 단점이며, W3C는이 속성을 수정하는 것이 좋습니다.

기타 리소스 : link1, link2, link3, link4, link5 (important)

출처

2012-07-03 19:15:35

관련 문제

 관련 문제