Overflow-x: hidden cũng ẩn nội dung theo chiều dọc

Question

Tôi có DIV rộng 400px, chứa hai DIV cạnh nhau, mỗi chiều rộng 400px và chiều cao 600px. Chiều rộng của cả hai DIV là cố định, tuy nhiên chiều cao có thể thay đổi. Tôi muốn ẩn DIV thứ hai và hiển thị hoàn toàn đầu tiên, không có cuộn bên trong DIV.

Giải pháp của tôi, tôi nghĩ, là để ẩn tràn-x. Điều này dường như cũng ẩn tràn y quá.

Dưới đây là mã của tôi:

#schools-sub-nav { 
 
} 
 
#schools-container { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    background-color: fuchsia; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
#schools-list { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    height: 600px; /* Delete the height, let the content define the height */ 
 
    background-color: purple; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#boards-list { 
 
    width: 400px; /* Set the width of the visible portion of content here */ 
 
    height: 600px; /* Delete the height, let the content define the height */ 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 400px; 
 
}

<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div> 
 
<div id="schools-container"> 
 
    <div id="schools-list"> One </div> 
 
    <div id="boards-list"> Two </div> 
 
</div>

Tôi hy vọng #schools-list để được nhìn thấy, nhưng đối với một số lý do overflow-x: hidden trong #schools-container ẩn nó.

Answer 1

Cách bạn thực hiện hai div (với vị trí tuyệt đối) làm mất hiệu lực quy tắc tràn!

Bạn cần thay đổi loại vị trí (thành bình thường/không tuyệt đối) và tôi khuyên bạn nên sử dụng phao, cuối cùng, div vùng chứa mà bạn muốn áp dụng tràn, cần phải có cách phù hợp, như đặt div ở cuối cùng với clear: both (trong trường hợp sử dụng phao). EDIT: Tôi vừa thử nó và bạn có thể ẩn div thứ hai bằng cách làm theo gợi ý trên và thêm một div xung quanh khác với chiều rộng rất lớn và thay đổi overflow-x thành overflow cho div vùng chứa chính.

Như thế này:

<div id="schools-container"> 
    <div id="schools-container-inside"> 
    <div id="schools-list"> One </div> 
    <div id="boards-list"> Two </div> 
    </div> 
</div> 

Và sau đó CSS ​​(tôi nhận xét bản gốc CSS không được sử dụng và thêm lớp mới div ở cuối):

#schools-container { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    background-color: fuchsia; 
    position: relative; 
    /*overflow-x: hidden;*/ 
    overflow: hidden; 
} 
#schools-list { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: purple; 
    /* 
    position: absolute; 
    top: 0; 
    left: 0; 
    */ 
    float: left; 
} 
#boards-list { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    height: 600px; /* Delete the height, let the content define the height */ 
    background-color: green; 
    /* 
    position: absolute; 
    top: 0; 
    left: 400px; 
    */ 
    float: left; 
} 
#schools-container-inside { 
    width: 10000px; 
    overflow: hidden; 
} 

JsFiddle đây: http://jsfiddle.net/MbMAc/

Answer 2

Tôi nghĩ rằng bạn cần điều này

#schools-container { 
    width: 400px; /* Set the width of the visible portion of content here */ 
    background-color: fuchsia; 
    position: relative; 
    overflow-x: hidden; 
    overflow-y:auto; 
    height:600px; 
} 

Bạn cũng cần xác định chiều cao của div chính.