절대 위치에 배치 된 요소로 CSS div 오버플로

나는 머리글, 왼쪽 옵션 열 및 내용 열의 세 가지 기본 div가있는 절대 배치 레이아웃이 있습니다. 디자인 된 동작은 항상 페이지에서 머리글과 왼쪽 옵션 열을 유지하는 것입니다. 콘텐트 열은 자유롭게 위아래로 스크롤 할 수 있습니다 (왼쪽의 제어판과 위쪽의 제목 표시 줄).절대 위치에 배치 된 요소로 CSS div 오버플로

문제는 창의 크기를 조정하고 왼쪽에서 오른쪽 (x 축)으로 콘텐츠 div 내에 오버플로가 발생합니다. 내가 원하는 동작은 약 1000 픽셀의 최소 너비입니다.이 시점에서 가로 스크롤 막대는 내용 열에 나타나며 사용자가 스크롤 할 수 있습니다. 이렇게하면 레이아웃이 너무 작아서 내 레이아웃이 의도 한대로 보이지 않게됩니다.

필자는 기존의 CSS에서 min-width 지시어를 사용하려고했지만 아무 소용이 없었습니다. min-width는 "cutoff"를 얻지 만, 수평 스크롤바가 나타나지 않고 가로로 스크롤 할 수 없습니다.

기존 패러다임을 사용하여이를 수행 할 방법이 있습니까? 아니면 스타일 시트를 다르게 수행해야합니까? 다음은 (내가 content_column을 테스트 한 최소 폭 속성) 기존 구현 :

html { 
    overflow: hidden; 
} 

body { 
    margin: 0px; 
    padding: 0px; 
    background: #E5E5E5; 
    color: #000000; 
    font-family: 'Open Sans', sans-serif; 
    height: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    border: 0px none; 
} 

#header { 
    position: absolute; 
    margin: 0px; 
    top: 0px; 
    left: 0px; 
    display: block; 
    color: #FFFFFF; 
    background: #146647; 
    font-size: 1.5em; 
    padding: 5px; 
    width: 100%; 
    overflow: hidden; 
    z-index: 3; 
} 

#option_column { 
    position: absolute; 
    left: 0px; 
    top: 40px; 
    bottom: 0; 
    background: #0F4C35; 
    color: #FFFFFF; 
    width: 155px; 
    padding: 3px; 
    z-index: 2; 
    overflow: auto; 
} 

#content_column { 
    position: absolute; 
    overflow: auto; 
    min-width: 1000px; 
    z-index: 1; 
    top: 40px; 
    left: 161px; 
    right: 0px; 
    bottom: 0px; 
    padding: 3px; 
    background: #E5E5E5; 
    color: #000000; 
    font-size: 14px; 
}

그리고 이것은 내 HTML 구조입니다 :

<body> 
    <div id="header"> 
     Head 
    </div> 

    <div id="option_column"> 
     Option Column 
    </div> 

    <div id="content_column"> 
     <div class="header_text">Content Header</div> 
     <div id="subheader"> 
      Content (content_column intended to stop resizing at 1000px) 
     </div> 
    </div> 

</body>

출처

2013-02-24 Mike Nielsen

다음과 같은 점 바이올린 : http://jsfiddle.net/4M43d/ – isherwood

"나는 절대적으로 위치 레이아웃 (...)이 스타일 시트가 다르게 수행해야합니까해야" . 나는 YES라고 대답하고 싶은 유혹을받을 것입니다. – FelipeAls

그래, 고의적 인 수평 스크롤링은 좋은 생각이다. 그것은 당신의 사용자를위한 번거 로움입니다. 또한 1000px 콘텐츠 열과 사이드 바를 함께 사용하면 대부분의 방문자가 사이트의 전체 너비를 볼 수 없습니다. 이상한 요구 사항이 없으면이 계획을 다시 생각해 보겠습니다. – isherwood

무엇

#content_column {overflow-x: scroll}

IE < 9는 축 관련 오버플로를 수행하지 않으므로 {overflow: scroll}을 사용해야합니다. 내용 섹션에

출처

2013-02-24 21:27:02 isherwood

"overflow-x : scroll"은 div 맨 아래에 비활성화 된 가로 스크롤 막대를 배치합니다. 가로로 스크롤 할 수 있어야하는 지점을지나 윈도우 크기를 조절하면 비활성화 된 채로 작동하지 않습니다. –

또한 창의 크기를 조정하면 윈도우가 스크롤바를 "겹쳐"표시됩니다 (즉, 스크롤바가 활성화되는 대신 최소 너비에 도달하면 창이 크기가 조정 됨). –

는

overflow-y: auto;

width:1000px;

을 설정하지만이 방법은 폭은 항상 1000px에 남아있을 것입니다. 즉 , 시작

#content_column { 
position: absolute; 
width: 1000px; 
overflow-y: auto; 
overflow-x:scroll; /* override overflow:hidden; applied to body & html */ 
z-index: 1; 
top: 40px; 
left: 161px; 
right: 0px; 
bottom: 0px; 
padding: 3px; 
background: #E5E5E5; 
color: #000000; 
font-size: 14px; 
}

출처

2013-02-24 21:33:52

이렇게해도 계속 허용되지 않습니다. 나를 가로로 스크롤 (그냥 "잘라내는"). –

시도하십시오'width : 1000px; overflow-y : 자동; overflow-x : 스크롤; 또한 body 및 html 태그에서'overflow : hidden;'을 제거하고 내용 섹션에만'overflow' 속성을 적용하십시오. –

'overflow-x : scroll;'을 고려하여 위의 코드를 업데이트했습니다. –

절대 위치에 배치 된 요소로 CSS div 오버플로

답변

관련 문제