가장자리에 길이가 고정되어 있지만 주 내용 컨테이너가 유동적 인 레이아웃 유형입니다.CSS로이 유형의 레이아웃을 만들려면 어떻게해야합니까?
나는 여기에 jsfiddle을 만들었다 http://jsfiddle.net/JyXtR/3/ 나는 그것을 얻을 수 없다. 나는 왜 그런지 이해하지 못한다.
은 내가 얻고 싶은 것은이 http://i.imgur.com/VPzWE.png
주요 내용이며, 오른쪽의 컨테이너의 내용에 관계없이 그들에게 얼마나 많은 콘텐츠의 같은 높이이어야한다.
나는 이것에 정말로 나쁘거나 CSS가 항상 전체 페이지를 차지하는 이러한 유형의 레이아웃에 적합하지 않습니까?
Demo. display:inline-block;을 사용하고 두 개체의 너비를 조정하십시오. 프리젠 테이션 목적으로 메인 div의 높이를 300px로 수동으로 설정했습니다. 메인 오브젝트는 스크롤되지 않으므로 내부 오브젝트는 than height:100% 이하로 사용해야합니다.
아마도 height 속성을 display:table-cell 요소로 설정할 수는 있지만 주어진 솔루션이 귀하의 경우에 잘 작동해야합니다.
업데이트 : http://jsfiddle.net/22D4F/4/
차가움. 메인 높이를 100 %에서 바닥 글 높이를 뺀 값으로 만드는 방법은 무엇입니까? 아니면 Javascript로해야합니까? #main이 클 때 사이드 바가 #main의 맨 아래에 붙어있는 이유는 무엇입니까? – fent
두 번째 버그를 재현 할 수 없지만 위치 지정을 사용하여 100 % 빼기 바닥 글 높이를 조정할 수 있습니다. 그러나 현재의 솔루션은 꽤 엉망입니다. 아마도 더 좋은 것을 찾을 수 있습니다 (힌트 : 함께 속한 것을 함께 사용하고 필요에 따라 작은 CSS를 사용하십시오). – Zeta
업데이트 된 솔루션이 효과적입니다. :) 모든 도움에 감사드립니다. 이것은 오늘 나를 정말로 강조하고 있었다. – fent
지금 확인하십시오. 그러나 css로만 해결할 수 없기 때문에 한 가지 문제가 있습니다. 사이드 바가 콘텐츠보다 길면 콘텐츠 레이아웃이 제대로 작동하지 않습니다. javascript 없이는 해결할 수 없으므로 콘텐츠 div의 최소 높이를 사이드 바 콘텐츠 높이에 설정해야합니다. http://jsfiddle.net/DvaWk/
채팅 div를 남기고 온라인 사용자 div를 200px로 설정해야합니다.
EDIT : 오버플로 : #main에 자동 추가.
당신이 http://jsfiddle.net/22D4F/2/ 같은 것을 의미합니까? – Zeta
그런 것 같지만 정확하지는 않습니다. 이상적으로는 콘텐츠 높이가 둘 다 다를 수 있으므로 주 콘텐츠와 사이드 바에는 자체 스크롤 막대가 있어야합니다. 나는 당신이 사이드 바를 접한 방식을 좋아합니다. – fent