CSS - 수평 스크롤을 방지하는 방법은 무엇입니까?

Question

이 질문에는 아마도 간단한 해결책이있을 것입니다.

나는 2 개의 열이 나란히있는 웹 사이트를 디자인했습니다. 오른쪽 열을 제외하고 모든 것은 고정되어 있습니다 (메뉴 막대와 왼쪽 열).

페이지의 읽을 수있는 콘텐츠를 보유 할 수 있도록 오른쪽 열만 스크롤하려는 경우 의도적입니다. 그래서 모든게 훌륭합니다. 맞죠?

정확하게는 왼쪽 열이 왼쪽으로 떠 있고 오른쪽 열도 왼쪽 여백이 더 크므로로드 할 때 페이지에 제대로 앉을 수 있습니다.

그러나 화면이 가로로 너무 작 으면 사용자는 왼쪽 및 오른쪽으로 스크롤하여 두 번째 열을 모두 고정 된 첫 번째 열 아래로 이동시킬 수 있습니다. 그것이 내가 막고 싶은 것입니다.

두 번째 열을 세로로 스크롤 할 수 있지만 가로로 이동하지 못하게하려면 어떻게해야합니까?

#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} 
#button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;} 
#button{ 
    float:right; margin: 5px -20px 0 0; 
} 
#button a { 
    background:url(../images/button.png) 
    no-repeat; 
    display:block; /* Necessary, since A is not a block element */ 
    width: 167px; 
    height: 58px; 
} 
#button a:hover { 
    background:url(../images/buttonhover.png) no-repeat; 
    width:167px; 
    height:58px; 
} 
.right {float:right; margin: 0 0 5px 25px;} 
#secondary-content {float: right; margin: 100px 0 15px 569px; background: rgba(128,127,128,0.9); padding: 20px; background: rgba(128,127,128,0.9); width:405px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} 

감사합니다 :

다음은 CSS의 snipet입니다! 요소에 스크롤 막대를 허용하고 위에 매달려 아무것도 숨길하지 않습니다

Answer 1

overflow-x:hidden 

.

Answer 2

귀하의 질문을 올바르게 이해했으면 좋겠지 만, 왜 플로트를 사용할 필요가 없습니까?

Float는 요소를 왼쪽이나 오른쪽으로 밀 때 사용하는 것이 편리하다고 생각하지만 해결책이 필요하지 않습니다. 대신 보조 콘텐츠 div 위치에 absolute를 사용할 수 있습니다. 여백을 사용하는 대신 위쪽, 왼쪽을 사용하는 것이 더 쉽습니다. 당신이 바로 그 장소에 보조-콘텐츠 사업부를 갖고 싶어한다면 당신은 사용할 수 있습니다

position: absolute; 
top: 100px; 
left: 569px; 

나는 당신이 당신의 요소 주위에 공간을 만들기위한 다른 요소와 사용 마진과 동일 할 좋습니다.