Làm cho hai phần tử CSS nổi có cùng chiều cao

Tôi có hai phần tử có thể thay đổi theo chiều cao và cả hai đều nổi bên cạnh nhau. Vấn đề là nó trông khá xấu xí nếu một hộp cao hơn cái kia. Vì vậy, tôi muốn chúng có cùng chiều cao.Làm cho hai phần tử CSS nổi có cùng chiều cao

Một cách tôi nghĩ có thể làm việc sẽ là quá để bọc chúng trong một div container và hy vọng một cao thay đổi kích thước nó và một nhỏ hơn mở rộng để phù hợp với không gian:

HTML:

<div id="outerBox"> 
<div class="innerBoxLeft"></div> 
<div class="innerBoxRight"><br /><br /><br /></div> 
</div>

CSS:

.outerBox 
{ 
width: 100%; 
} 

.innerBoxLeft 
{ 
float:left; 
width: 45%; 
height: 100%; 
} 

.innerBoxRight 
{ 
float:right; 
width: 45%; 
height: 100%; 
}

không làm việc. Tôi tin rằng điều này có thể là do div bên ngoài không có chiều cao thiết lập và vì lý do nào đó hộp nhỏ hơn và chiều cao 100% của nó không có gì để làm việc. Tôi không thể cho nó một chiều cao được thiết lập tuy nhiên bởi vì điều đó sẽ đánh bại điểm.

Vì vậy, trừ khi có một cách khác, tôi đoán tôi đang hỏi: Làm thế nào tôi có thể đặt chiều cao của phần tử con với chiều cao của phần tử con đó?

Cảm ơn

Nguồn

2009-07-23 Damien

tại sao bạn không sử dụng một bảng?

Điều này trở nên vô lý. Người dùng muốn xem bảng. Ngôn ngữ HTML cung cấp một phần tử bảng để đạt được chính xác mục tiêu mà người dùng muốn. Tuy nhiên, chúng tôi sử dụng toàn bộ thư viện (tôi xem xét câu trả lời của JQuery) để đạt được mục tiêu với một bảng mặc dù nó có nghĩa là một tập lệnh chạy trên máy khách!

Nguồn

2009-07-23 14:49:06

jQuery là một thư viện khá nhẹ, tất cả mọi thứ được xem xét và với tốc độ kết nối nhanh hơn và nhanh hơn, nó không phải là vấn đề lớn đối với hầu hết người dùng. Bảng là câu trả lời dễ nhất, nhưng không phải lúc nào cũng là câu trả lời hay nhất. Để hiển thị dữ liệu theo kiểu thời trang tương tự như bảng tính, các bảng là rất xa để đi, nhưng để tìm ra những gì tôi chắc chắn Damien hy vọng là một trang web ngữ nghĩa, sạch sẽ, nó không phải là giải pháp lý tưởng. – Andrew

+10

Vấn đề không phải là kích thước nhưng trong hành vi của kịch bản. Bạn giải quyết một vấn đề bố trí tĩnh bằng cách năng động của scipt. Trên máy tính chậm, bạn có thể thấy thay đổi bố cục của mình khi tập lệnh thực thi. Nếu người dùng đã tắt Javascript, nó sẽ bị bố cục sai. Bạn nên thử HTML (nội dung) riêng biệt từ CSS (bố cục) từ Javascript (hành động) và không giải quyết các vấn đề của cái này với cái khác. –

Như với bất cứ điều gì khác, nó đi xuống cho khách hàng hoặc sở thích cá nhân. Tôi tin tưởng rất nhiều vào việc tách nội dung và bố cục, nhưng những gì nó thực sự trở thành đối tượng của bạn. Đối với các dự án cá nhân, tôi sẽ giả định một vài điều về đối tượng mục tiêu của mình (hỗ trợ Flash, Javascript, kết nối tốc độ cao, trình duyệt hiện đại) và tôi sẽ phát triển phù hợp. Dữ liệu Analytics thường xác nhận giả định của tôi về tất cả các điểm này. Cuối cùng, nếu không có câu trả lời dễ dàng (hoặc ngữ nghĩa hợp lệ) có sẵn trong HTML/CSS, thì tôi không thấy điểm nào trong việc sử dụng một chút JS để bù đắp cho những thiếu sót này. – Andrew

Một cách để làm những điều sau đây mà không cần sử dụng JavaScript là thông qua một kỹ thuật gọi là Faux-Cột.

Về cơ bản nó liên quan đến việc áp dụng background-image cho các phần tử mẹ của các phần tử lưu hành khiến bạn tin rằng hai phần tử có cùng chiều cao.

thông tin

More sẵn tại địa chỉ:

A List Apart: Articles: Faux Columns

Nguồn

2009-07-23 14:24:01

Tôi thấy điều này nhưng các hộp khá mô-đun trong thiết kế (tức là họ hộp theo kiểu) vì vậy tôi không chắc chắn giải pháp này lý tưởng như thế nào. – Damien

Có một số cách có mức độ phức tạp và thành công khác nhau. Một kỹ thuật làm việc cho tôi ( ~~Tôi không nhớ nơi tôi nhìn thấy đầu tiên~~ nó link, problems) như sau:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
     #page { 
      clear:both; 
      overflow:hidden; 
      width:100%; 
     } 
     #page div { 
      margin:0 0 -6000px 0; /* nothing special about 6000px */ 
      padding:0 0 6000px 0; /* any large enough value will do */ 
     } 
     div.article { 
      background:blue; 
      float:left; 
      width:70%; 
     } 
     div.sidebar { 
      background:red; 
      float:right; 
      width:30%; 
     } 
    </style> 
</head> 
<body> 

<div id="page"> 
    <div class="article"> 
     <p>Some content</p> 
    </div> 
    <div class="sidebar"> 
     <p>Some content</p> 
     <p>Some content</p> 
     <p>Some content</p> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2009-07-23 14:30:21

Hầu như ở đó, mong đợi nó cắt dưới đáy hộp. Tôi sẽ cập nhật khi tôi tiến hành – Damien

@Damien yes, 'border-bottom' trên' div's chứa 'sẽ bị cắt bỏ. Tôi thường thiết kế xung quanh nhưng sau đó thiết kế của tôi không phải là phức tạp. –

Cũng xin lưu ý rằng bố cục này bị hỏng với các neo (ví dụ: các trang Câu hỏi thường gặp) –

Tỷ lệ hiếm khi làm việc như chiều cao trong CSS. Để làm cho chiều cao con giống như cha mẹ của chúng, bạn có thể sử dụng một chút Javascript. Đây là những gì nó sẽ trông như thế nào trong jQuery:

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() {  
      var containerheight = $("outerBox").height; 
      $(".outerBox").children().css("height",containerheight) 
    </script>

Nếu bạn muốn chỉ cần thực hiện các hộp bên trong một container kích thước tương tự, Tập đoàn Filament có một plugin tuyệt vời cho cân bằng chiều cao hộp với jQuery và nó rất tốt tài liệu:

Equal Heights With jQuery

Nguồn

2009-07-23 14:33:34 Andrew

Vote này xuống đến vô cùng nếu bạn thích nhưng tôi nghĩ rằng tôi cũng có thể Wack phần này của thiết kế trong một bảng ...

Nguồn

2009-07-23 14:43:05 Damien

Tôi nghĩ rằng bảng nên được sử dụng cho những gì chúng được tạo ra - và đó là lưu trữ dữ liệu, không hiển thị bố cục.

Nếu bạn muốn tốt, trình duyệt chéo & giải pháp CSS không có hack - check this article.

Nguồn

2009-08-07 08:22:11 zeroDivisible

Trong khi tôi đồng ý với các bình luận trên bàn của bạn, giải pháp đó về bản chất là cam kết cùng một tội đánh dấu không theo ngữ nghĩa. Sử dụng một bảng cho một cái gì đó mà không thực sự là một bảng (không nhất thiết phải là dữ liệu nghiêm ngặt) là cam kết cùng một tội lỗi vì nội dung không được coi là một bảng. Nhiều div un-semantic được làm hoàn toàn để làm cho các cột màu nền giả cũng tệ như vậy ở mặt trước đó, IMO. Nếu bạn có các trình bao bọc đó, vì các lý do ngữ nghĩa (trang> nội dung> phần> bài viết vv), thì tôi đoán nó sẽ hoạt động. – kmiyashiro

Muộn cho bữa tiệc, nhưng đây là [swing của tôi] (http://jsfiddle.net/thirdender/vxuUr/) tại các cột bằng nhau (tương tự như bài viết được liên kết) sử dụng: trước khi bộ chọn psuedo. Không hữu ích khủng khiếp, nhưng ai đó có thể tìm thấy nó "thú vị" (hoặc xấu ... suy nghĩ khiêu khích ít nhất?) – thirdender

function setSameHeight(class_name){ 
    var max_height = 0; 
    var cards = getElementsByClassName(class_name);  
    for (var i=0; i<cards.length; i++){ 
    if (cards[i].offsetHeight > max_height){     
     max_height = cards[i].offsetHeight; 
    } 
    } 
    for (var i=0; i<cards.length; i++){ 
    cards[i].setAttribute("height", max_height); 
    cards[i].height = max_height;   
    } 
} 

function getElementsByClassName(className){ 
    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); 
    var allElements = document.getElementsByTagName("*"); 
    var results = []; 
    var element; 
    for (var i = 0; (element = allElements[i]) != null; i++) { 
    var elementClass = element.className; 
     if (elementClass && elementClass.indexOf(className) != -1 &&  hasClassName.test(elementClass)) 
     results.push(element); 
    } 
    return results; 
}

sử dụng mà cho các bảng

Nguồn

2011-06-28 07:07:01 megamanx

Điều này có thể được thực hiện bởi css tinh khiết .. – raven

Hãy thử điều này: http://www.filamentgroup.com/examples/equalHeights/

Đây là một dễ dàng để sử dụng jQuery plugin, mà bạn chỉ có thể sử dụng trên thùng sơn phụ huynh và tất cả các yếu tố mức độ con đầu được điều chỉnh để cùng chiều cao với chiều cao nhất.

Nguồn

2012-10-24 18:33:30

Sử dụng display:table-cell;

Điều này rất hữu ích trong thiết kế email hai cột (độ rộng đáp ứng).

Xem demo tại đây.

Nguồn

2013-11-08 03:43:01 raven

function evenup(){ 
     var maxHeight = Math.max.apply(null, $(".myClass").map(function(){ 
      return $(this).height(); 
     }).get()); 
    $(".myClass").height(maxHeight); 
}

Nguồn

2014-09-09 18:39:29 Shawn

Nếu bạn thực sự muốn div hoạt động như bàn, bạn chỉ có thể tùy chỉnh "hiển thị" css của div.

display: table cho div chứa

display: table-cell cho div bên trong để hoạt động như td

Nguồn

2015-08-13 09:29:10 Andrew

Làm cho hai phần tử CSS nổi có cùng chiều cao

Trả lời

Các vấn đề liên quan