CSS : 콘텐츠를 제외한 모든 것

콘텐츠를 스크롤 할 수있는 동안 배너, 탐색 및 바닥 글이 고정 된 상태로 레이아웃을 만들려고합니다. 비슷한 레이아웃을 보았지만 실제 페이지 내용은 제한되어 있지 않습니다. 내가 지금 원하는 것은 무엇이든을 중심으로하는 것입니다,하지만 당신은 더 나은 당신은 아마 시각적 뭔가가 필요 - 내가 지금까지 무엇을 가지고 :CSS : 콘텐츠를 제외한 모든 것

HTML

<body> 
<div id="container"> 
    <div id="banner"></div> 
    <div id="main"> 
     <div id="nav1"></div> 
     <div id="nav2"></div> 
     <div id="content"></div> 
    </div> 
    <div id="footer"></div> 
</div>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
    background-color: #222; 
} 

#container { 
    margin: 0 auto; 
    height: 100%; 
    width: 800px; 
    margin-top: 20px; 
    background-color: black; 
} 

#banner { 
    width: 100%; 
    height: 100px; 
    background-color: red; 
} 

#main { 
    height: 100%; 
    width: 100%; 
} 

#nav1 { 
    height: 100%; 
    width: 150px; 
    float: left; 
    background-color: yellow; 
} 

#nav2 { 
    height: 100%; 
    width: 100px; 
    float: right; 
    background-color: yellow; 
} 

#content { 
    height: 100%; 
    width: 100%; 
    background-color: white; 
} 

#footer { 
    width: 100%; 
    height: 30px; 
    background-color: lime; 
}

jsfiddle : http://jsfiddle.net/gLhd6sno/1/

스크롤 할 때 흰색 영역의 콘텐츠 만 원한다. 이동, 또한 레이아웃을 깨지 않고 오버 플로우를 비활성화하는 방법을 알아낼 수 없습니다. 어쩌면 당신은 생각을 가지고 있을까요? 감사합니다.

출처

2014-10-04 Vic

절대 위치 지정에 의존하는 방법 중 하나가 여기에 있습니다.

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
    background-color: #222; 
    margin: 0; 
} 

#container { 
    width: 800px; 
    left: 50%; 
    margin-left: -400px; 
    background-color: black; 
    position: absolute; 
    top: 20px; 
    bottom: 0; 
} 

#banner { 
    width: 100%; 
    height: 100px; 
    background-color: red; 
    position: absolute; 
    top: 0; 
} 

#main { 
    width: 100%; 
    position: absolute; 
    top: 100px; 
    bottom: 30px; 
} 

#nav1 { 
    width: 150px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    background-color: yellow; 
    border: 2px dotted blue; 
} 

#nav2 { 
    width: 100px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background-color: yellow; 
    border: 2px dotted blue; 
} 

#content { 
    position: absolute; 
    top: 0; 
    bottom: 0px; 
    left: 150px; 
    right: 100px; 
    background-color: tan; 
    border: 2px dotted blue; 
    overflow: auto; 
} 

#footer { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    height: 30px; 
    background-color: lime; 
}

참조 데모 : 당신이 높이를 축소하는 경우 http://jsfiddle.net/audetwebdesign/k9nsvt3t/

, 당신은 스크롤 막대가 트릭을 할 수있는 컨텐츠 영역, 주위에 나타납니다 볼 수 있습니다. 나머지 페이지 요소는 기본 영역의 내용량 인 에 관계없이 정적입니다.

출처

2014-10-04 23:10:32

CSS : 콘텐츠를 제외한 모든 것

답변

관련 문제