브라우저보다 넓은 DIV 용 스크롤 막대가 없습니다.

Question

저는 Wordpress를 CMS로 사용하여 웹 사이트에서 몇 가지 테스트를하고 있습니다. 아래 예제에서 페이지의 왼쪽 상단에는 브라우저의 너비에 따라 잘린 메인 콘텐츠 영역 외부에 "S"그래픽이 있습니다. 바닥 글의 오른쪽에있는 "L"그래픽과 비슷한 것을하고 싶습니다.

페이지 너비는 960px로 설정되어 있고 내용 영역 외부에 "L"이 표시되도록 바닥 글 컨테이너 DIV 1088px를 만들었습니다. 문제는 브라우저의 현재 너비를 초과 할 때 스크롤 막대를 표시하는 것입니다.

바닥 글 컨테이너 DIV에 숨겨진 오버플로를 시도했지만 작동하지 않는 것 같습니다. 나는 또한 오버 플로우를 시도했습니다 : BODY 요소에 숨겨져 있고 이것은 IE에서는 잘 작동하지만 다른 브라우저에서는 그렇지 않습니다.

예 : http://unclemort.com/wp/

난 정말이 일을 멀리가 희망 도움이 감사 받았다. 추가있는 style.css에서

Answer 1

시도, 라인 65 :

#footer-container { 
    border: none; 
    overflow: hidden; 
} 

설명 :

#footer-container #footer { 
    background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left; 
    width: 1088px;  
    height: 217px; 
    overflow: hidden; 
    } 

숨어있는 스크롤 효과적으로이 하지입니다. 당신이 쥐고있는 스크롤 바가 또 하나 있습니다. 문제는 바닥 글의 너비가 1088px이므로 스크롤바가 표시되는 것입니다.

바닥 글의 너비가 고정되어 있고 부모의 오버플로 : 숨김이없는 한 바닥 글의 너비가 충분하지 않으면 스크롤 할 수 있습니다. 다른 컨테이너에는 동일하게 적용됩니다.

Answer 2

오늘 나는이 사실을 알기 위해 노력하고 있었고 그 답을 얻지 못했습니다.

#wrapper { 
    min-width: 600px; //whatever width you want 
    overflow-x: hidden; 
} 

귀하의 주요 내용이 같은 폭을 가져야하고, 음의 여백이 있어야합니다 밖으로 돌출하는 데 필요한 것들 : 당신이 필요로하는 것은 주변이 모든 것을 주변 요소이다. 여기

는 완벽한 예입니다 :

HTML :

<div id="outer"> 
    <div id="container"> 
     <div class="row"> 
      <div class="inner">Hello World</div> 
     </div> 
    </div> 
</div> 

CSS :

#outer { 
     min-width: 300px; 
     overflow-x: hidden; 
    } 

    #container { 
     width: 300px; 
     margin: 0px auto; 
     background: gray; 
     height: 500px;  
    } 

    .row { 
     width: 350px; 
     background: blue; 
     margin-left: -25px; 
    } 

    .inner { 
     background: yellow; 
     margin-left: 25px; 
     width: 300px; 
     height: 100px; 
    } 

    @media screen and (min-width: 301px) { 
     body { 
      //overflow-x: hidden; 
     } 
    } 

jsfiddle : 숨어 대한

http://jsfiddle.net/aaronjensen/9szhN/