고정 레이아웃 + 와이드 컨텐트 = 테이블?

Question

나는 너비가 고정 된 웹 페이지를 가지고 있습니다. 전에 테이블을 사용했고 div를 사용하여 테이블을 다시 만들었습니다. 일반적으로 나는 그것에 만족합니다 (바닥 글은 지금 멋지게 붙어 있습니다).

하지만 문제가 있습니다. 콘텐츠를 제어 할 수 없으며 때로는 매우 광범위한 요소를 포함 할 수 있습니다. 현재 (divs) 레이아웃에서 요소가 화면에 맞지 않으면 스크롤 할 필요가 없으며 페이지 프레임이 끝나면 빈 공간 (예 : 머리글, 바닥 글 없음)이 표시됩니다.

div의 원인은 보이는 창으로 만 확장된다는 것입니다.

• 테이블 레이아웃으로 돌아가 :

  나는 그것을 해결하는 방법의 두 가지 옵션을 참조하십시오. 이 경우 올바르게 작동했습니다. 콘텐츠가 더 넓 으면 창틀 너머로 확장되었습니다.

• 너비를 확인하고 필요한 경우 확장하는 JavaScript 솔루션을 구현합니다. 그러나 나는 그것이 잘못되었다고 생각합니다.

더 좋은 방법이 있습니까? 테이블과 마찬가지로 divs를 사용하여 비슷한 동작을 얻으려고합니다.

그리고 추가 정보가 필요하면 알려 주시기 바랍니다. 감사합니다.

편집 : IE6 (또는 적어도 IE7이보기 흉한 것처럼 보이지 않는 경우) 이상이어야하며 모든 최신 브라우저가 작동해야합니다.

EDIT2 : 여기에 내가 말하는 내용을 볼 수있는 예가 있습니다 : http://jsfiddle.net/wxrJU/6/. 오른쪽으로 스크롤하면 빈 공간이 있음을 볼 수 있습니다. divs 프레임은 확장되지 않습니다. 누군가 jsfiddle에서 구현 된 솔루션을 제공 할 수 있다면, 나는 그것을 고맙게 생각할 것이다.

Answer 1

CSS2 display: table;을 table-cell과 함께 사용하고 table-row 값 (IE8 +)과 함께 사용하는 것이 좋습니다.

이 머리글과 바닥 글은 내용이 매우 넓은만큼 때 시각적으로 넓은하지 않은 경우, 여기에 몇 가지 옵션이 있습니다 :

• 이 기술이 만드는 가짜 열에게 전화를 적용 참조 faux- 행 (neo-neologism에 대해 유감스럽게 생각합니다 :)).
  콘텐츠가 임의의 높이가 될 수 있기 때문에 (가짜 열 고정 폭과는 반대) 헤더가 left top이고 바닥 글이 left bottom 인 다중 배경을 적용해야합니다.
• CSS3 background-size은 원하는 너비의 배경 이미지 크기로 조정됩니다. IE9 + 위대한 사이트에 따르면 http://caniuse.com 그 밖에 브라우저의 3 분의 2 이상 (사용자가 관리 또는 거대한 회사 에서처럼 오래된 IE를 많이 사용하는 경우 제외). IE8에 대한 SO polyfill background-size을 참조하십시오.

EDIT : CSS3 레이아웃 옵션을 잊어 버렸습니다.

• Flexible Box Layout Module
  가 인 flexbox에 관해서는
• Multiple column layout (같은 (이 IE10 + 때문에 polyfills 존재, 사용자 50 ~ 60 %를 작동합니다) 대신 display: table;의

  은 또한 CSS3 옵션을 고려할 수 있습니다 : IE10 +, polyfills이 (그리드 레이아웃에 대한

• 너무 빨리) 존재 지금은 하나의 브라우저에서 작동 : IE10)

Answer 2

나는 이것을 테스트하지 않았습니다 IE6 또는 7,하지만 정말 유용 할 것

http://jsfiddle.net/wxrJU/10/