HTML / CSS: Tạo hai div nổi có cùng chiều cao

106

Tôi có một vấn đề đặc biệt nhỏ mà tôi hiện đang giải quyết bằng cách sử dụng a table, hãy xem bên dưới. Về cơ bản, tôi muốn có hai div chiếm 100% chiều rộng có sẵn, nhưng chỉ chiếm nhiều không gian dọc nếu cần (điều này không thực sự rõ ràng trong hình). Cả hai phải luôn có cùng chiều cao với một đường thẳng nhỏ giữa chúng, như được hiển thị.

_{(nguồn: pici.se )}

Điều này rất dễ sử dụng table, mà tôi hiện đang làm. Tuy nhiên, tôi không quá quan tâm đến giải pháp, vì về mặt ngữ nghĩa, đây thực sự không phải là một bảng.

html css html-table

— Deniz Dogan
nguồn

2

Ơ ... bức tranh ở đâu? Tôi biết rằng mình đã quá muộn để bình luận về điều này

— Ajay Kulkarni

Đây là liên kết hình ảnh từ WebArchive.org https://web.archive.org/web/20120617031534/http://pici.se/pictures/qJRMtoLPv.png

— DidThis

160

Bạn có thể có được các cột có chiều cao bằng nhau trong CSS bằng cách áp dụng đệm dưới cùng của một lượng lớn, lề âm dưới cùng của cùng một lượng và bao quanh các cột bằng một div đã ẩn phần tràn. Căn giữa văn bản theo chiều dọc sẽ phức tạp hơn một chút nhưng điều này sẽ giúp ích cho bạn.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Mở rộng đoạn mã

Tôi nghĩ điều đáng nói là ~~câu trả lời trước đó của streetpc có html không hợp lệ, loại tài liệu là XHTML và có các dấu ngoặc kép xung quanh các thuộc tính. Cũng cần lưu ý rằng~~bạn không cần thêm phần tử clearbật để xóa các phao bên trong của thùng chứa. Nếu bạn sử dụng hàm ẩn tràn, điều này sẽ xóa các float trong tất cả các trình duyệt không phải IE và sau đó chỉ cần thêm một thứ gì đó để cung cấp hasLayout chẳng hạn như chiều rộng hoặc thu phóng: 1 sẽ khiến IE xóa các float bên trong của nó.

Tôi đã thử nghiệm điều này trong tất cả các trình duyệt hiện đại FF3 + Opera9 + Chrome Safari 3+ và IE6 / 7/8. Nó có vẻ như là một thủ thuật xấu xí nhưng nó hoạt động tốt và tôi sử dụng nó trong sản xuất rất nhiều.

Tôi hi vọng cái này giúp được.

— Natalie Downe
nguồn

1

Mã mà tôi đã xác thực tại trình xác thực của W3C (tốt, sau khi bạn thêm phần tử <title>, đó không phải là ý của bạn). Hơn nữa, các thông số kỹ thuật cho phép sử dụng dấu nháy đơn theo cuộc thảo luận này: sitepoint.com/forums/showthread.php?t=54273#6

— instanceof tôi

1

Xin lỗi, sai lầm của tôi. Tôi đã sửa đổi câu trả lời của mình ở trên. Tuy nhiên, điểm cần lưu ý, với phương pháp của bạn, nếu cột bên phải lớn hơn bên trái, màu đỏ sẽ hiển thị bên dưới vì hai hộp không có chiều cao chính xác. Tùy thuộc vào thiết kế, tôi sẽ chọn cột giả hoặc phương pháp này với lề và phần đệm dưới cùng.

— Natalie Downe,

2

Trên thực tế, trong khi giải pháp được đưa ra bởi Kevin C. về việc cắt bỏ bóng đổ hoạt động cho phần đệm trên cùng, bên trái và bên phải, nó không hoạt động đối với phần dưới cùng. Cho đến nay vẫn chưa tìm ra giải pháp.

— JeanMertz

1

Làm tốt lắm Natalie. @laarsk Chiều cao không thể đoán trước được chính xác là điều này phải không? Xem demo: jsfiddle.net/RT3MT/4 di chuyển đoạn văn "còn" xung quanh để xem

— jpillora

1

Đây là một trong những cách hack CSS xấu xí nhất mà tôi từng thấy, nhưng tôi sẽ đón nhận nó với vòng tay rộng mở lol. Nó có vẻ là cách duy nhất phía trước

— Matt Vukas

98

Đó là năm 2012 + n, vì vậy nếu bạn không còn quan tâm đến IE6 / 7, display:table, display:table-rowvà display:table-celllàm việc trong tất cả các trình duyệt hiện đại:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Cập nhật 2016-06-17: Nếu bạn nghĩ rằng đã đến lúc display:flex, hãy xem Flexbox Froggy .

— Dmitry Leskov
nguồn

30

Sẽ là năm nào khi câu trả lời này được thay thế bằng display: flex?

— LandonSchropp

12

Không, chúng tôi hiện đang ở trong năm 2014 (;

— Francisco Presencia,

9

aaaaaa và có lẽ là năm 2015 vào cuối năm chúng ta có thể thay đổi câu trả lời để hiển thị: flex :)

— MetalWeirdo

5

Tôi vẫn đang sống ở những năm 1950.

— Jay

1

Xin chào từ năm 2016! Chúng ta có thể sử dụng flex ngay bây giờ

— Brett Gregson

20

Bạn nên sử dụng flexbox để đạt được điều này. Nó không được hỗ trợ trong IE8 và IE9 và chỉ với tiền tố -ms trong IE10, nhưng tất cả các trình duyệt khác đều hỗ trợ nó. Đối với tiền tố của nhà cung cấp, bạn cũng nên sử dụng trình sửa lỗi tự động .

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

— Lucaamondsb
nguồn

1

Vấn đề tôi gặp phải với flex là nó cần một trình bao bọc xung quanh các cột. Với kỹ thuật bảng float + display: tôi có thể có một tiêu đề và một loạt các cột và hiệu ứng hoạt động trên các cột mà không ảnh hưởng đến tiêu đề.

— Stijn de Witt

10

bạn có thể làm việc này với js:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

— Andi P. Trix
nguồn

1

Xin lưu ý rằng câu hỏi này đã khá cũ và các giải pháp tốt hơn (không cần javascript) đã được cung cấp.

— nirazul 17/09/13

1

Tôi thực sự thích giải pháp này. Đó là niềm vui và cho thấy không chỉ có bạn mới có thể thao tác html của bạn với css, nhưng bạn cũng có thể làm điều đó với sự giúp đỡ của jquery

— csichar

6

Giải pháp này sẽ không hoạt động nếu chiều cao của các cột thay đổi. Điều này có thể xảy ra nếu nội dung của các cột bị thay đổi. Chức năng này cần được chạy: thay đổi nội dung và thay đổi kích thước trình duyệt .on. Cách tiếp cận css là lý tưởng hơn vì nó tránh được những mối lo ngại

— alexreardon

5

Đây là một vấn đề kinh điển trong CSS. Không thực sự có một giải pháp cho điều này.

Bài báo này từ A List Apart là một bài đọc tốt về vấn đề này. Nó sử dụng một kỹ thuật gọi là "cột giả", dựa trên việc có một hình nền lát gạch theo chiều dọc trên phần tử chứa các cột tạo ảo giác về các cột có độ dài bằng nhau. Vì nó nằm trên trình bao bọc của phần tử nổi nên nó dài bằng phần tử dài nhất.

Các biên tập viên của A List Apart có ghi chú này trên bài báo:

Một lưu ý từ các biên tập viên: Mặc dù xuất sắc cho thời gian của nó, bài viết này có thể không phản ánh các phương pháp hay nhất hiện đại.

Kỹ thuật này yêu cầu thiết kế chiều rộng tĩnh hoàn toàn không hoạt động tốt với bố cục lỏng và kỹ thuật thiết kế đáp ứng phổ biến ngày nay cho các trang web thiết bị chéo. Tuy nhiên, đối với các trang web có chiều rộng tĩnh, đó là một lựa chọn đáng tin cậy.

— Philippe Leybaert
nguồn

Cảm ơn bạn, đó có vẻ như là một hack tốt đẹp. Tuy nhiên, tôi quên đề cập rằng cột bên phải phải có văn bản trong đó, căn giữa theo chiều dọc. Tôi có đúng khi tin rằng các cột giả không thể làm được điều này không?

— Deniz Dogan,

4

Tôi đã gặp vấn đề tương tự và theo ý kiến của tôi, lựa chọn tốt nhất là chỉ sử dụng một chút javascript hoặc jquery.

Bạn có thể nhận được các div mong muốn có cùng chiều cao bằng cách lấy giá trị div cao nhất và áp dụng giá trị đó cho tất cả các div khác. Nếu bạn có nhiều div và nhiều giải pháp, tôi khuyên bạn nên viết một đoạn mã js trước để tìm ra div nào là cao nhất và sau đó sử dụng giá trị của nó.

Với jquery và 2 div thì rất đơn giản, đây là mã ví dụ:

$('.smaller-div').css('height',$('.higher-div').css('height'));

Và cuối cùng, còn 1 điều cuối cùng. Phần đệm của chúng (trên và dưới) phải giống nhau! Nếu một trong những có đệm lớn hơn, bạn cần phải loại bỏ sự khác biệt đệm.

— Mr Br
nguồn

1

Theo như tôi biết, bạn không thể làm điều này bằng cách sử dụng các triển khai CSS hiện tại. Để tạo hai cột, chiều cao bằng nhau, bạn cần JS.

— Calin Don
nguồn

1

Điều này hoạt động đối với tôi trong IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Cũng hoạt động trong IE 6 nếu bạn bỏ ghi chú div rõ ràng hơn ở dưới cùng. Chỉnh sửa : như Natalie Downe nói, bạn chỉ có thể thêm width: 100%;để #containerthay thế.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Tôi không biết cách CSS để căn giữa văn bản theo chiều dọc trong div bên phải nếu div không có chiều cao cố định. Nếu đúng như vậy, bạn có thể đặt line-heightgiá trị bằng với chiều cao của div và đặt một div bên trong chứa văn bản của bạn với display: inline; line-height: 110%.

— ví dụ của tôi
nguồn

1

Sử dụng Javascript, bạn có thể làm cho hai thẻ div có cùng chiều cao. Div nhỏ hơn sẽ điều chỉnh để có cùng chiều cao với thẻ div cao nhất bằng cách sử dụng mã được hiển thị bên dưới:

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

Với "left" và "right" là id của các thẻ div.

— Quintox303
nguồn

1

Bằng cách sử dụng thuộc tính css -> display: table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}

<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

Mở rộng đoạn mã

0

Sử dụng JS, sử dụng data-same-height="group_name"trong tất cả các phần tử bạn muốn có cùng chiều cao .

Ví dụ: https://jsfiddle.net/eoom2b82/

Mật mã:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

— Wiliam
nguồn

0

Tôi cần làm điều gì đó tương tự, đây là cách thực hiện của tôi. Để tóm tắt lại mục đích, nó là có 2 phần tử chiếm chiều rộng của một vùng chứa mẹ nhất định và chiều cao chỉ cao đến mức cần thiết. Về cơ bản chiều cao bằng chiều cao tối đa của lượng nội dung lớn nhất, nhưng thùng chứa khác đang phẳng.

html

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

css

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

— người đàn ông này
nguồn

0

Vài năm trước, các floattài sản sử dụng để giải quyết vấn đề đó với tablephương pháp sử dụng display: table;và display: table-row;và display: table-cell;.

Nhưng bây giờ với thuộc tính flex, bạn có thể giải quyết nó bằng 3 dòng mã: display: flex;và flex-wrap: wrap;vàflex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%là các flexgiá trị mà chúng tôi đã cung cấp cho: flex-grow flex-shrink flex-basistương ứng. Đó là một phím tắt tương đối mới trong flexbox để tránh nhập chúng riêng lẻ. tôi hy vọng giúp đỡ ai đó ngoài kia

— Fouad Boukredine
nguồn