오버플로 : 가로 방향의 스크롤이 작동하지 않습니다.

웹 사이트에 <div>이 여러 개 있고 본문에 <div>이 고정되어 있지만 <div class = "content"> 만 스크롤 할 수 있습니다.오버플로 : 가로 방향의 스크롤이 작동하지 않습니다.

내 Master.Page의 HTML 구조입니다.

<body> 
    <form id="form1" runat="server"> 
    <div class="navLeft"> 

    </div> 
    <div class="navTop"> 
     <asp:ContentPlaceHolder id="cphNavTop" runat="server"> 

     </asp:ContentPlaceHolder> 
    </div> 
    <div class="banner"> 
     <asp:ContentPlaceHolder id="cphBanner" runat="server"> 

     </asp:ContentPlaceHolder> 
    </div> 
    <div class="divider"> 
     <asp:ContentPlaceHolder id="cphDivider" runat="server"> 

     </asp:ContentPlaceHolder> 
    </div> 
    <div class="content"> 
     <asp:ContentPlaceHolder id="cphContent" runat="server"> 
      (there are several another <div> here for content pages) 
     </asp:ContentPlaceHolder> 
    </div> 
    </form> 
</body>

이것은 제 CSS 코드입니다.

body 
{ 
    margin:auto; 
    width:1280px; 
    height:auto; 
    padding:0px; 
} 

form 
{ 
    width:auto; 
    height:auto; 
} 

.navLeft 
{ 
    width:60px; 
    min-height:100vh; 
    float:left; 
    text-align:center; 
    background-color:lightgrey; 
    border-right:1px solid rgb(0,177,169); 
} 

.navTop 
{ 
    min-width:550px; 
    height:60px; 
    background-color:lightgrey; 
} 

.banner 
{ 
    min-width:1200px; 
    height:75px; 
    background-color:rgb(235,235,235); 
} 

.divider 
{ 
    min-width:800px; 
    height:24px; 
    background-color:rgb(0,177,169); 
} 

.content 
{ 
    width:auto; 
    height:470px; 
}

내 CSS 코드를 변경하기 전에 내 웹 사이트는 다음과 같습니다.

내가 같이 넣어하고자하는 다른 테이블이 주목;

나는이 같은 .content에 오버 플로우를 넣어 ;

.content 
{ 
    overflow:scroll; 
    width:auto; 
    height:470px; 
}

horizaontal 스크롤이 작동하지 않으므로 결과적으로 내 웹 사이트가 이렇게 보입니다.

내 모든 Master.Page의 <div> 그것이 자신의 스크롤이 <div class="content">을 제외하고 그 위치에 고정되어있다. 그러나 내가 무엇을하려고해도 그것은 테이블이 옆면이고 내 가로 스크롤 막대가 비활성화 된 두 번째 이미지처럼 보이게 할 수 있습니다.

내 CSS 코드에 누락 된 항목이 있습니까, 아니면 내 CSS 코드가 인식하지 못하는 오류가 있습니까?

내 문제가 이해되기를 바랍니다. 미리 감사드립니다.

출처

2016-06-30 Fahmieyz

폭을? 시체 폭? 양식 너비? 또는 .content 너비? 왜냐하면 몸체에 대해 지정된 너비가 다른 모니터 해상도로 열리면 공백을 줄 것이기 때문입니다. 나는 .content 너비와 놀아 내려고 노력하지만 여전히 동일한 결과를 내고 – Fahmieyz

오른쪽 테이블이 창에 맞지 않아 첫 번째 테이블 아래로 내려갑니다. 두 테이블의 너비를 다시 계산하여 단일 행에 함께 맞출 수있게해야합니다.

콘텐츠를 수평선 위로 스크롤하려면 번호가 매겨진 너비를 정의해야합니다. 자동 속성을 사용하지 않습니다.

출처

2016-06-30 05:12:39

까지 너비를 계산할 수있다. 왼쪽 테이블은 726px이고 공백은 10px이고 테이블 오른쪽은 577px이다. .content 너비를 1315px로 변경하려고 시도하지만 여전히 동일한 결과를 보임 – Fahmieyz

이 시도하고 당신을 위해 작동하는지 확인 :

.content 
{ 
    overflow:scroll; 
    height:470px; 
} 

.content > div { 
    display: inline-block; 
}

출처

2016-06-30 05:26:13

아니요, 작동하지 않음 ... 감사합니다. 어쨌든 ... – Fahmieyz

'display : inline-block;'속성은 테이블 (기본적으로 블록 요소이므로). – ConnorsFan

오버플로 : 가로 방향의 스크롤이 작동하지 않습니다.

답변

관련 문제