Một trong những điều khó khăn trong thiết kế web hiện đại là tạo bố cục cột hai (hoặc nhiều hơn) trong đó tất cả các cột có chiều cao bằng nhau. Tôi đặt ra một nhiệm vụ để tìm cách làm điều này trong CSS thuần túy.
Bạn có thể dễ dàng thực hiện việc này bằng cách sử dụng hình nền trong gói bọc-div chứa cả hai cột của bạn (hoặc nền của trang).
Bạn cũng có thể thực hiện việc này bằng cách sử dụng các ô bảng CSS, nhưng tiếc là trình duyệt hỗ trợ cho điều này vẫn còn râm, vì vậy nó không phải là giải pháp ưu tiên. Đọc tiếp, có một cách tốt hơn.
Tôi tìm thấy nguồn cảm hứng từ hai trang trên web, mặc dù tôi thích giải pháp hơn vì nó cho phép tôi tự do sử dụng góc tròn và chiều rộng hoặc bố cục phần trăm chính xác hơn và dễ chỉnh sửa hơn không buộc bạn phải làm số crunching âm.
== Bí quyết: ==
Trước tiên, bạn tạo ra các cols thiết kế nền, sau đó bạn đặt một div toàn bộ chiều rộng có thể chứa nội dung thường xuyên của bạn. Bí quyết là tất cả các cột nổi trong các cột, tạo hiệu ứng đẩy trên tất cả các cột cha khi nội dung mở rộng theo chiều dài, bất kể cột kết thúc dài nhất là bao lâu.
Trong ví dụ này, tôi sẽ sử dụng lưới 2 cột trong tâm quấn-div được căn giữa với các góc bo tròn. Tôi đã cố gắng để giữ cho fluff ra cho dễ dàng sao chép-dán.
== Bước 1 ==
Tạo trang web cơ bản của bạn.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
== Bước 2 ==
Tạo một tài khoản nổi div bên trong một nổi div. Sau đó, áp dụng một lề âm trên div bên trong để bật nó ra khỏi khung của nó một cách trực quan. Tôi đã thêm đường viền chấm cho mục đích minh họa. Biết rằng nếu bạn thả div bên ngoài sang bên trái và cung cấp cho div bên trong một lề âm ở bên trái, div bên trong sẽ đi theo cạnh trang mà không cho bạn một thanh cuộn.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
this content obviously only fits the left column for now.
</div>
</div>
</body>
</html>
== Bước 3 ==
Trong div bên trong: Tạo một div mà không có nền mà có với tất cả các cột cộng lại. Nó sẽ đẩy qua các cạnh của div bên trong. Tôi đã thêm đường viền chấm chấm để minh họa các mục đích.Đây sẽ là canvas cho nội dung của bạn.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
float:left;
width:400px;
border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
this content spans over both columns now.
</div>
</div>
</div>
</body>
</html>
== Bước 4 ==
Thêm nội dung của bạn. Trong ví dụ này, tôi đặt hai div được định vị trên layout. Tôi cũng lấy đi các đường viền chấm chấm. Presto, đúng vậy. Bạn có thể sử dụng mã này nếu bạn muốn.
<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</body>
</html>
== Bước 5 ==
Để làm cho nó đẹp hơn bạn có thể làm trung tâm thiết kế toàn bộ trong một div bọc và cung cấp cho nó tròn góc. Các góc tròn sẽ không hiển thị trong IE cũ trừ khi bạn sử dụng một sửa chữa đặc biệt cho điều đó.
<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
position:relative;
width:500px;
margin:20px auto;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
}
#rightsideBG{
float:right;
background:silver;
width:300px;
}
#leftsideBG{
float:left;
background:gold;
width:100px;
margin-left:-100px;
}
#overbothsides{
float:left;
width:400px;
}
#leftcol{
float:left;
width:80px;
padding: 10px;
}
#rightcol{
float:left;
width:280px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rightsideBG">
<div id="leftsideBG">
<div id="overbothsides">
<div id="leftcol">left column content</div>
<div id="rightcol">right column content</div>
</div>
</div>
</div>
</div>
</body>
</html>
nguồn cảm hứng == ==
Quentin, KHÔNG PHẢI là bản sao. Mã của tôi được INSPIRED bởi (trong số những người khác) http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks nhưng nó đơn giản hơn và được thay đổi, mặc dù tôi không nhớ chính xác những gì sự khác biệt là, thời gian dài trước đây tôi đã viết nó. – Paul
Sử dụng trang web này cho loại sự cố này: http://callmenick.com/post/css-equal-height-columns-three-different-ways –