스크롤하지 않은 전체 높이 열

Question

지금은이 사이트에서 작업 중입니다 : http://weloveprivacy.com/ 상단 (.top-wrap)에서 바닥 글 (.png)까지 내용물 (#container)을 늘리려고합니다. 꼬리말)을 가져올 수 있습니다. 열 (.front1, .front2, .front3)이 항상 동일한 높이를 갖고 화면을 채우기를 원합니다. 그래서 테두리가 맨 위에서 바닥 글까지 늘어납니다.

순수 CSS에서 가능합니까?

Answer 1

음, 재미있었습니다. 다음 CSS를 추가

.nav { 
left:0; 
} 
#wrapper { 
overflow:hidden; 
} 
#container { 
height:auto !important; 
min-height:100%; 
margin:0 auto; 
padding:0; 
} 
#container > div { 
margin-bottom:-10000px; 
padding-bottom:10000px; 
} 
.footer { 
margin-top:-97px; 
position:relative; 
} 

보기 jsFiddle Example 행동에서 볼 수 있습니다.

참고 :margin-bottom/padding-bottom 해킹 IE의 이전 버전을 깰 것입니다. 조건부 문장을 사용하여 해당 스타일을 손상된 버전에 제공하고 단순히 열이 늘어나지 않고 볼 수있게하는 것이 좋습니다.

Answer 2

이 #container 다음 CSS 속성을 추가

width: 33%; 

제거 폭 :

float: left; 
width: 100%; 

이 .front1 다음 속성을 추가, .front2, 3 .front 318px Front 1에서을, Front 2 , 앞면 3. 이제 열이 화면의 전체 너비로 늘어나고 각 열의 너비는 동일합니다 (전체 너비의 33 % 차지).

Answer 3

적어도 당신이 생각하는 방식으로 순수 CSS를 사용하는 것은 불가능합니다. 그래도 할 수있는 일은 faux columns 같은 가짜입니다. 아이디어는 포함하는 요소로 세 개의 열을 래핑 한 다음 세로로 바둑판 식으로 배열 된 요소에 배경 이미지를 적용하는 것입니다. 이로 인해 동일한 높이의 기둥이 생길 수 있습니다.

변경하기 위해 이미지를 편집해야하기 때문에 관리하기가 다소 힘들지만 신뢰할 만합니다.