고정 사이드 바 및 헤더가있는 CSS 100 % 레이아웃

고정 된 사이드 바 및 탐색 경로 헤더가 있고 나머지 공간을 차지하는 스크롤 가능한 컨텐츠 섹션이있는 웹 디자인에서 작업하고 있습니다. 여기에 내가 최종 결과처럼 보이는 구상 내용은 다음과 같습니다고정 사이드 바 및 헤더가있는 CSS 100 % 레이아웃

Layout Mockup

문질러, 나는 불쾌한 컨테이너 <div>의 또는 해키 CSS없이이 일을하는 방법을 알아낼 수 없습니다입니다. 필자는 시맨틱 HTML (이 특정 프로젝트의 경우 HTML 5)을 좋아하므로 스타일 업 요소를 마크 업에서 지키고 싶지는 않습니다.

사이드 바에 두 개의 고정 폭 (펼치기 및 접기)이 있으며 헤더의 높이는 항상 고정되어 있습니다.

이것은 (기본적으로) 내가 볼 수있는 마크 업 할 방법 :

는

<body> 
    <aside> 
     <!-- sidebar content --> 
     <h1>My Site</h1> 
    </aside> 
    <section> 
     <nav> 
      <!-- breadcrumbs --> 
      <a href="#home">Home</a> 
      <a href="#area">Area</a> 
      <a href="#category">Category</a> 
      <a href="#">Item</a> 
     </nav> 
     <article> 
      <!-- page content --> 
      <h2>Item Title</h2> 
      <p> 
       Item Content 
      </p> 
     </article> 
    </section> 
</body>

은 누군가가 나에게 이것에 대한 CSS 작업을 도와 줄 수 있습니까?

편집 : 지금까지 내 CSS는 :

html { 
    font-family: "Segoe UI", sans-serif; 
    font-size: 9pt; 
    height: 100%; 
} 
html body { 
    margin: 0px; 
    height: 100%; 
    padding: 0px; 
} 
html body aside { 
    background-color: rgb(32, 80, 128); 
    float: left; 
    height: 100%; 
    width: 256px; 
} 
html body section { 
    background-color: rgb(16, 40, 64); 
    height: 100%; 
    margin-left: 256px; 
} 
html body section nav { 
    background-color: rgb(242, 242, 242); 
    height: 32px; 
} 
html body section article { 
    background-color: rgb(255, 255, 255); 
    margin: 0px 32px 32px 32px; 
}

출처

2011-02-17 Adam Maras

지금까지 어떤 CSS가 있었습니까? – TNC

나는 내 직위를 수정했다. –

'html body {'- ''태그 바깥쪽에'' 태그가 있습니까? – drudge

-1

"옆으로"와 "섹션"요소 사이에 "nav"요소를 배치해야합니다. 그런 다음이 트릭을 수행해야합니다 (스크롤바를 트리거하는 'article'요소에 더 많은 콘텐츠 추가).

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Demo</title> 
    <style type="text/css"> 
     * {margin:0;padding:0;} 
     aside,section,nav,article {display:block;} 
     body {background: rgb(16, 40, 64);} 
     html,body,aside {overflow:hidden;height:100%;} 
     aside {background: rgb(32, 80, 128);float:left;width: 256px;} 
     section {position:relative;margin:0 -256px 0 256px;overflow:auto;} 
     nav {background: rgb(242, 242, 242);height: 32px;} 
     article {background: rgb(255, 255, 255);margin:32px;} 
    </style> 
    </head> 
    <body> 
    <aside> 
     <!-- sidebar content --> 
     <h1>My Site</h1> 
    </aside> 
    <nav> 
     <!-- breadcrumbs --> 
     <a href="#home">Home</a> 
     <a href="#area">Area</a> 
     <a href="#category">Category</a> 
     <a href="#">Item</a> 
    </nav> 
    <section> 
     <article> 
     <!-- page content --> 
     <h2>Item Title</h2> 
     <p>Item Content</p> 
     </article> 
    </section> 
    </body> 
</html>

출처

2011-02-18 18:44:49

누구에게나 적용 되는가? 추가 된 콘텐츠가 많은 최신 크롬에서는 스크롤하지 않아도됩니다. – kinet

가장 좋은 방법은 CSS를 사용하는 것입니다. 그것은 위치 n '물건에 관한 누구나 이어도. div를 사용할 필요는 없지만 클래스 나 ID를 모든 것에 할당하는 것보다 훨씬 낫습니다. 아래의 코드는 사이드 바를 한 곳에서 머물게하고 콘텐츠의 경우 바로 떠있게합니다. 당신이 가봐야 할 것 같아요.

출처

2011-02-17 01:46:35 khuderm

틀리지 마라. –

고정 사이드 바 및 헤더가있는 CSS 100 % 레이아웃

답변

관련 문제