CSS khoảng hai cột bố trí

Question

Tôi chưa bao giờ nghĩ rằng viết một cách bố trí đơn giản hai cột là quá phức tạp sử dụng css .... haha ​​

Những gì tôi muốn làm là như sau:

1. Khi chiều cao của nội dung div vượt quá chiều cao của kích thước màn hình, thanh cuộn chỉ tồn tại trong div nội dung. Người sử dụng chỉ có thể di chuyển div nội dung nhưng thanh bên giữ tĩnh

2. Hai cột nên có cùng một chiều cao

   bố trí của tôi là:

< -------- ------- vùng chứa ------------------->

< ----------------- --header ------------------>

< ----- sidebar -------> < --------- content --->

< --------------- --- footer ------------------->

< --- End of container --------------- ---------->

đây là tập tin css của tôi: http://137.189.145.40/c2dm/css/main.css

Cảm ơn bạn/

Answer 1

#WorldContainer 
{ 
    width: 1000px; 
    margin: auto; 
    overflow: hidden; 
} 

.ContentColumn 
{ 
    float: left; 
    width: 500px; 
    overflow: auto; 
} 

<div id="WorldContainer"> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
</div> 

Điều đó sẽ cung cấp cho bạn trang mà div chính không thể cuộn nhưng hai cột div có thể. Họ sẽ ở bên nhau. Câu hỏi của bạn không rõ ràng vì vậy hy vọng đây là những gì bạn đã làm sau.

EDIT: Để trả lời bạn hiển thị trang web mẫu.

Sự cố của bạn thực sự đơn giản.

Tất cả các div của bạn có quy tắc chiều cao là height: 100%; Khi bạn sử dụng chiều cao phần trăm, bạn sẽ đặt nó thành một phần trăm của vùng chứa bên trong, nghĩa là vùng chứa chính. KHÔNG phải là chiều cao phần trăm của toàn bộ cửa sổ.

Mỗi vùng chứa chỉ định chiều cao phần trăm sao cho kết quả là chiều cao 0. Cung cấp cho div ngoài cùng của bạn một chiều cao cố định và vấn đề sẽ được giải quyết.

Chỉnh sửa bổ sung:

Nếu bạn đang quan tâm đến việc bảo đảm div ngoài cùng luôn kéo dài đến dưới cùng của cửa sổ thì đây là một giải pháp css sử dụng định vị tuyệt đối:

#OutermostDiv 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

Sử dụng phương pháp này vẫn còn gây ra một chiều cao tính toán mặc dù div bên ngoài không có chiều cao mã hóa cứng. Điều này sẽ cho phép bạn sử dụng độ cao phần trăm trên div bên trong của bạn và duy trì một div bên ngoài trải dài từ trên xuống dưới cùng của cửa sổ hiển thị.

Answer 2

bạn sẽ phải thiết lập yếu tố container của bạn để overflow:hidden; và nội dung div của bạn thành overflow:scroll; (và có thể làm overflow-x:hidden; để ẩn thanh cuộn ngang). Vấn đề với điều này là nếu sidebar của bạn & nội dung sẽ có cùng chiều cao, thì bạn sẽ phải có HAI thanh cuộn - một cho nội dung và một cho thanh bên.

Bạn có thể giải quyết vấn đề này bằng cách sử dụng phần tử vùng chứa khác chỉ quanh thanh bên & nội dung và đặt overflow: scrollbar; overflox-x:hidden; trên đó thay vì thanh bên/nội dung.

Answer 3

Bạn cũng có thể sử dụng display:table và display:table-cell để tạo cột nếu bạn gặp khó khăn với float. Dưới đây là CSS:

#container 
{ 
width:960px; 
margin:0; 
padding:0; 
display:table; 
} 
#sidebar 
{ 
width:300px; 
display:table-cell; 
} 
#content 
{ 
width:660px; 
display:table-cell; 
} 

và HTML là:

<div id="container"> 

<div id="sidebar"> 
<!-- Sidebar Content Here --> 
</div> 

<div id="content"> 
<!-- Content Here --> 
</div> 

</div> 

Hy vọng điều này giải quyết vấn đề của bạn. Nhưng display:table không hoạt động trong một số trình duyệt cũ.