Có một vị trí div cố định cần cuộn nếu nội dung tràn

Tôi thực sự có hai vấn đề, nhưng trước tiên hãy giải quyết vấn đề chính vì tôi tin rằng vấn đề kia dễ giải quyết hơn.

Tôi có một vị trí div cố định ở phía bên trái của cuộn cho menu. Bên phải là một div tiêu chuẩn cuộn đúng cách. Vấn đề là khi cổng xem trình duyệt quá nhỏ để xem toàn bộ menu .. không có cách nào để cuộn nó mà tôi có thể tìm thấy (ít nhất là không bằng css). Tôi đã thử sử dụng các dòng tràn khác nhau trong css, nhưng không có gì làm cho cuộn div. Div chứa menu được đặt thành min-height: 100% và vị trí: fixed .. cả hai thuộc tính tôi cần giữ.

Các div chứa menu nằm bên trong một div trình bao bọc khác được định vị tuyệt đối và chiều cao được đặt thành 100%.

Làm cách nào tôi có thể khiến nó cuộn theo chiều dọc nếu nội dung quá cao so với div?

Điều đó dẫn tôi đến một vấn đề khác, đó là tôi không muốn một thanh cuộn hiển thị .. nhưng tôi nghĩ rằng tôi có thể đã có câu trả lời cho điều đó (chỉ có điều nó chưa hoạt động vì tôi không thể di chuyển div đầu tiên là).

Giải pháp nào? Có lẽ javascript là cần thiết? (trong đó tôi biết rất ít về)

Ví dụ về Fiddle

và mã có liên quan gây ra sự cố (vì việc đăng toàn bộ nội dung ở đây là quá lâu):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

Cũng đã thử thêm chiều cao: 100% cũng chỉ để xem đó có phải là vấn đề không nhưng nó cũng không hoạt động ... cũng không có chiều cao cố định, chẳng hạn như 600px.

Vấn đề với việc sử dụng height:100% là nó sẽ là 100% trang thay vì 100% cửa sổ (như bạn có thể mong đợi nó sẽ xảy ra). Điều này sẽ gây ra sự cố mà bạn đang thấy, bởi vì nội dung không cố định đủ dài để bao gồm nội dung cố định với chiều cao 100% mà không yêu cầu thanh cuộn. Trình duyệt không biết / quan tâm rằng bạn thực sự không thể cuộn thanh đó xuống để xem nó

Bạn có thể sử dụng fixedđể thực hiện những gì bạn đang cố gắng làm.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Cái ngã ba này của bạn cho thấy sự sửa chữa của tôi: http://jsfiddle.net/strider820/84AsW/1/

Dưới đây là cả hai bản sửa lỗi.

Đầu tiên, liên quan đến thanh bên cố định, bạn cần cho nó một chiều cao để nó tràn ra:

Mã HTML:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

Mã CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Ví dụ trực tiếp: http://jsfiddle.net/RWxGX/3/

Không thể KHÔNG có thanh cuộn nếu nội dung của bạn vượt quá chiều cao của div. Đó là lý do tại sao tôi đã thêm một truy vấn phương tiện cho chiều cao màn hình. Có lẽ bạn có thể điều chỉnh kiểu của mình cho kích thước màn hình ngắn để cuộn không cần xuất hiện.

Chúc mừng, Ignacio

Nói chung, phần cố định nên được đặt với width, heightvà top, bottomcác thuộc tính, nếu không nó sẽ không nhận ra kích thước và vị trí của nó.

Nếu hộp được sử dụng là con trực tiếp cho cơ thể và có hàng xóm, thì việc kiểm tra z-indexvà top, lefttính chất sẽ rất hợp lý, vì chúng có thể chồng lên nhau, điều này có thể ảnh hưởng đến chuột của bạn khi di chuyển nội dung.

Đây là giải pháp cho một hộp nội dung (con trực tiếp của bodythẻ) thường được sử dụng cùng với điều hướng di động.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Hy vọng nó sẽ giúp được ai. Cảm ơn bạn!

Các giải pháp ở đây không hiệu quả với tôi khi tôi tạo kiểu cho các thành phần.

Những gì làm việc mặc dù cho thanh bên là

.sidebar{
position: sticky;
top: 0;
}

Hy vọng điều này sẽ giúp được ai đó.

Để lại một câu trả lời cho bất cứ ai muốn làm điều gì đó tương tự nhưng theo hướng ngang , như tôi muốn.

Câu trả lời của Tweaking @ strider820 như dưới đây sẽ làm nên điều kỳ diệu:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Đó là nó. Ngoài ra kiểm tra nhận xét này trong đó @train giải thích bằng cách sử dụng overflow:autohơn overflow:scroll.