2
사이드 바가있는 웹 애플리케이션을 작성하고 있습니다. webapp은 전체 화면 (절대 위치, 100 % 높이/너비)을 채우는 div에 맞습니다. 사이드 바는 상단 (고정 된 높이)에 제목과 로고가 있고 그 아래에 항목 목록이 들어있는 div가 있습니다. 표시되는 사이드 바를 오버런하면이 목록을 overflow: auto으로 설정하고 싶습니다. 사이드 바에 max-height: 100%을 사용해 보았지만 스크롤바를 호출하지는 않습니다. div가 사이드 바의 나머지 수직 공간을 채우게하고, 내용이 보이는 영역을 오버런 할 경우 스크롤바를 표시 할 수 있습니까?나머지 수직 공간을 채우는 DIV에 대해 자동 스크롤 막대를 설정하려면 어떻게해야합니까?
+--------------------------------------------------------------------------+
| #app_pane |
| +------------------+ |
| | #sidebar | |
| | +--------------+ | |
| | | #logo | | |
| | | | | |
| | | height: 50px | | |
| | | | | |
| | +--------------+ | |
| | +--------------+ | |
| | | #list | | |
| | | | | |
| | | | | |
| | | <----+-+-----------o fill remaining height |
| | | | | and display scrollbars if necessary |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | +--------------+ | |
| +------------------+ |
+--------------------------------------------------------------------------+
편집 : 나는 calc()와 CSS3에서 할 수있는 것처럼 글쎄 그것은 보이는,하지만 난 기존 브라우저 지원 솔루션을 선호하는 것입니다.
이것은 약간의 도움이 필요합니다. 'max-height : 100 %'는 속임수를 사용하지 않을 것입니다. 레거시 브라우저에서. 브라우저 지원 측면에서 어느 정도 뒤로 가야합니까? – moey
제한적이지만 기술적 인 잠재 고객을 타겟팅하고 있습니다. 그래서 나는 지난 2 년 이내에 브라우저를 기대하며, 최첨단을 요구하지 않는 것이 바람직합니다. –
그래서 이걸 원해? http://jsfiddle.net/9uJDZ/1 – mrtsherman