중심으로 3 열의 가짜 레이아웃이있는 끈적한 바닥 글을 제공하는 this sample CSS template부터 시작했습니다. 2 개의 측면 열은 고정 너비이며 주 내용은 내용의 크기에 맞게 수축 포장되지만 대신 래퍼의 CSS에 정의 된 max-width 값으로 늘어납니다. CSS에 수축 포장이 발생하는 스타일 (예 : "display:inline", "display:inline-block", "float:left", "display:table", "display:inline-table"등)이 없기 때문에 주요 콘텐츠가 늘어납니다. 그리고 마지막으로, 래퍼는 끈적 인 바닥 글을 제외한 모든 것을 포함합니다.스티치 바닥 글을 중심으로 3 열의 가짜 레이아웃에서 메인 컨텐츠를 줄이는 방법
display:table으로 래퍼를 설정하여 주 콘텐츠를 줄이려고했지만 래퍼 외부에있는 바닥 글 div의 너비가 잘못되었습니다. 이전에 래퍼와 동일한 방식으로 너비와 일치하는 것은 래퍼에서 max-width sytle과 일치하는 max-width 스타일로 기본 설정되어 있습니다. CSS 전문가는 아니지만 대체 끈적한 푸터 기술을 사용하여 래퍼 내부에서 끈끈한 바닥 글을 이동 시키려고 시도했지만 래퍼 내부에 끈적 인 바닥 글이 필요한 스타일로 가짜 열에 필요한 CSS 스타일을 충돌 시켰습니다. 나는 아마 그렇게 할 수 있을지 모른다. 그러나 나의 초기의 "빠른"테스트에서, 그것은 지저분 해졌다.
자바 스크립트로 크기를 조정하지 않고 대신 가능하면 CSS로 작업하는 것을 선호합니다. CSS로 어떤 아이디어?
및 here's a fiddle of it 래퍼 CSS에 "display : table"을 추가하지 않아도됩니다. 그것을 추가하면 문제가 시작됩니다.
코드가있는 바이올린이 도움이 될 것입니다. – mikevoermans
@mikevoermans 완료, 위의 바이올린을 참조하십시오. – johntrepreneur