너비/높이가 3 열인 브라우저 간 호환 CSS 액체 레이아웃

this 기사를 기반으로 HTML/CSS 레이아웃을 작성하기 시작했으며 다소 성공적이었습니다. 그러나, 나는이 페이지가 IE 또는 크롬/파이어 폭스에서 같은 방식으로 표시되지 않기 때문에 나는 어딘가에 내 CSS를 엉망으로 만든 것 같아요 ...너비/높이가 3 열인 브라우저 간 호환 CSS 액체 레이아웃

기본적으로 내 아이디어는 3 개의 등 너비 열을 갖는 것입니다. 100 % 높이. 각 열의 내용은 왼쪽, 위쪽 및 오른쪽에 약간의 여백을 가져야하며 '주'링크는 열의 중심에 정렬 된 각 열의 맨 아래에 있어야합니다.

이

내 레이아웃

enter image description here

당신은 내 현재의 결과 here을 볼 수의 스케치입니다. 크롬/파이어 폭스에서이 페이지를 보면 콘텐츠가 divs인데 내 페이지에서 '번지기'라는 내용을 볼 수 있습니다. IE 콘텐츠의 경우 divs에 적합합니다 (테스트 목적으로 만 콘텐츠 divs에 경계선을 넣었습니다). 나는 IE가 내 CSS를 올바르게 렌더링하고 있다고 생각하지 않는다. 오히려 나는 내 CSS에 문제가 있다고 생각하지만 실제로 무엇을 확신 할 수 없다. 이것에 대한 도움을 주셔서 감사합니다.

출처

2012-07-12 errata

fiddle plz를 작성하십시오 – Neji

피들이 있습니다. [http://jsfiddle.net/kJL5m/](http://jsfiddle.net/kJL5m/), 100 % 높이로 크기가 조정되지 않습니다./ – errata

높이를 100 %로 설정하고 패딩/여백 등을 설정하면 높이가 내부 높이이고 패딩/여백/경계선이 추가되어 오버플로가 발생합니다.

편집 : 패딩/여백/경계선을 백분율로 설정하여 높이를 100 %까지 늘리거나 javascript를 사용하여 적절한 픽셀을 계산하여 픽셀 높이로 각 열의 정확한 높이를 결정할 수 있습니다. 당신은 항상 CSS의 100 % 규칙처럼 행동하는 창의 크기를 조정할 때 이것을 발동 할 수 있습니다.

출처

2012-07-12 10:01:54

아, 알겠습니다 ... 제 divs에서'padding-top : 20px; '를 제거해야합니다. 내가 그렇게한다면, 조금 도움이 된 것처럼 보인다 ... 그 비율로 놀아 보려고 할 것이다. – errata

CSS 높이가 이미 100 %이고 높이가 실제로 '100 % + 패딩 - 위쪽 + 패딩 - 아래쪽 + 여백 - 위쪽 + 여백 - 아래쪽 + 경계선이 될 경우 패딩, 여백 및 테두리가 전체 표시된 높이에 추가됩니다. -bottom-width + border-top-width' –

너비/높이가 3 열인 브라우저 간 호환 CSS 액체 레이아웃

답변

관련 문제