HTML / CSS: ทำให้สอง divs มีความสูงเท่ากัน

106

ฉันมีปัญหาแปลก ๆ เล็กน้อยที่ฉันกำลังแก้โดยใช้ a tableดูด้านล่าง โดยพื้นฐานแล้วฉันต้องการให้สอง div ใช้พื้นที่ 100% ของความกว้างที่มีอยู่ แต่ใช้พื้นที่ในแนวตั้งเท่าที่จำเป็นเท่านั้น (ซึ่งไม่ชัดเจนจากภาพ) ทั้งสองควรมีความสูงเท่ากันตลอดเวลาโดยมีเส้นคั่นระหว่างเล็กน้อยดังที่แสดง

_{(ที่มา: pici.se )}

ทั้งหมดนี้ทำได้ง่ายมากโดยใช้tableที่ฉันกำลังทำอยู่ อย่างไรก็ตามฉันไม่กระตือรือร้นในการแก้ปัญหามากนักเนื่องจากในทางความหมายนี่ไม่ใช่ตาราง

html css html-table

— Deniz Dogan
แหล่งที่มา

2

เอ้อ ... รูปอยู่ไหน ฉันรู้ว่าฉันสายเกินไปที่จะแสดงความคิดเห็นเกี่ยวกับเรื่องนี้

— Ajay Kulkarni

นี่คือลิงค์รูปภาพจาก WebArchive.org https://web.archive.org/web/20120617031534/http://pici.se/pictures/qJRMtoLPv.png

— DidThis

160

คุณสามารถรับคอลัมน์ที่มีความสูงเท่ากันใน CSS ได้โดยใช้ช่องว่างด้านล่างของจำนวนมากขอบลบด้านล่างของจำนวนเดียวกันและล้อมรอบคอลัมน์ด้วย div ที่ซ่อนส่วนเกินไว้ การจัดข้อความให้อยู่กึ่งกลางในแนวตั้งนั้นค่อนข้างยุ่งยากกว่าเล็กน้อย แต่สิ่งนี้จะช่วยคุณได้

#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>

ขยายข้อมูลโค้ด

ฉันคิดว่ามันคุ้มค่าที่จะกล่าวถึงสิ่งนั้น คำตอบก่อนหน้านี้โดย streetpc มี html ที่ไม่ถูกต้องประเภทหลักคือ XHTML และมีเครื่องหมายคำพูดเดียวรอบแอตทริบิวต์ ที่น่าสังเกตก็คือคุณไม่จำเป็นต้องมีองค์ประกอบเพิ่มเติมด้วยclearเพื่อที่จะล้างการลอยตัวภายในของภาชนะ หากคุณใช้ overflow ที่ซ่อนอยู่สิ่งนี้จะล้างการลอยตัวในเบราว์เซอร์ที่ไม่ใช่ IE ทั้งหมดจากนั้นเพิ่มบางอย่างเพื่อให้ hasLayout เช่น width หรือ zoom: 1 จะทำให้ IE ล้างการลอยตัวภายใน

ฉันได้ทดสอบสิ่งนี้ในเบราว์เซอร์สมัยใหม่ทั้งหมด FF3 + Opera9 + Chrome Safari 3+ และ IE6 / 7/8 อาจดูเหมือนเป็นกลอุบายที่น่าเกลียด แต่ก็ใช้ได้ดีและฉันใช้มันในการผลิตมาก

ฉันหวังว่านี่จะช่วยได้.

— นาตาลี Downe
แหล่งที่มา

1

รหัสที่ฉันให้ตรวจสอบความถูกต้องที่ตัวตรวจสอบความถูกต้องของ W3C (เมื่อคุณเพิ่มองค์ประกอบ <title> ซึ่งไม่ใช่ประเด็นของคุณ) ยิ่งไปกว่านั้นข้อกำหนดอนุญาตให้ใช้เครื่องหมายคำพูดเดี่ยวตามการสนทนานี้: sitepoint.com/forums/showthread.php?t=54273#6

— instance ของฉัน

1

ขอโทษด้วยความผิดพลาดของฉัน ฉันได้แก้ไขคำตอบข้างต้นแล้ว ชี้ให้สังเกตด้วยวิธีการของคุณหากคอลัมน์ด้านขวาใหญ่กว่าด้านซ้ายสีแดงจะแสดงผ่านด้านล่างเนื่องจากกล่องทั้งสองไม่ตรงกับความสูงที่เหมาะสม ขึ้นอยู่กับการออกแบบฉันจะเลือกใช้คอลัมน์ faux หรือวิธีนี้โดยใช้ระยะขอบด้านล่างและช่องว่างภายใน

— Natalie Downe

2

จริงๆแล้วในขณะที่วิธีแก้ปัญหาที่ Kevin C. ให้ไว้เกี่ยวกับเงาที่ถูกตัดออกใช้งานได้กับช่องว่างด้านบนซ้ายและขวา แต่ก็ไม่ได้ผลกับด้านล่าง ยังไม่พบวิธีแก้ไข

— JeanMertz

1

นาตาลีทำได้ดีมาก @laarsk ความสูงที่คาดเดาไม่ได้คือสิ่งนี้คืออะไรใช่หรือไม่? ดูการสาธิต: jsfiddle.net/RT3MT/4ย้ายย่อหน้า "ยาว" ไปรอบ ๆ เพื่อดู

— jpillora

1

นี่เป็นหนึ่งในการแฮ็ก CSS ที่น่าเกลียดที่สุดที่ฉันเคยเห็น แต่ฉันจะโอบกอดมันด้วยการเปิดแขนฮ่า ๆ ดูเหมือนว่าจะเป็นทางเดียวเท่านั้น

— Matt Vukas

98

มันเป็นปี 2012 + n ดังนั้นหากคุณดูแลไม่เกี่ยวกับ IE6 / 7 display:table, display:table-rowและdisplay:table-cellการทำงานในเบราว์เซอร์ที่ทันสมัยทั้งหมด:

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

อัพเดท 2016/06/17:หากคุณคิดว่าเวลาที่มีมาสำหรับการdisplay:flexตรวจสอบflexbox Froggy

— Dmitry Leskov
แหล่งที่มา

30

จะเป็นปีอะไรเมื่อคำตอบนี้ถูกแทนที่ด้วยdisplay: flex?

— LandonSchropp

12

ไม่ตอนนี้เราอยู่ในปี 2014 (;

— Francisco Presencia

9

aaaaaa และมันอาจจะเป็นปี 2015 ภายในสิ้นปีเราสามารถเปลี่ยนคำตอบเป็น display: flex :)

— MetalWeirdo

5

ฉันยังคงมีชีวิตอยู่ในปี 1950

— Jay

1

สวัสดีจากปี 2016! เราสามารถใช้ flex ได้แล้ว

— Brett Gregson

20

คุณควรใช้ flexbox เพื่อให้บรรลุสิ่งนี้ ไม่รองรับใน IE8 และ IE9 และมีเฉพาะ -ms นำหน้าใน IE10 แต่เบราว์เซอร์อื่น ๆ ทั้งหมดรองรับ สำหรับคำนำหน้าผู้ขายคุณควรใช้autoprefixerด้วย

.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.
}

— Luca Steeb
แหล่งที่มา

1

ปัญหาที่ฉันมีเกี่ยวกับการดิ้นคือต้องมีกระดาษห่อหุ้มรอบคอลัมน์ ด้วยการแสดงลอย +: เทคนิคตารางฉันสามารถมีได้เช่นส่วนหัวและคอลัมน์จำนวนมากและเอฟเฟกต์จะทำงานกับคอลัมน์โดยไม่ส่งผลกระทบต่อส่วนหัว

— Stijn de Witt

10

คุณสามารถใช้งานได้กับ js:

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

— Andi P. Trix
แหล่งที่มา

1

โปรดสังเกตว่าคำถามนี้ค่อนข้างเก่าแล้วและมีวิธีแก้ปัญหาที่ดีกว่า (โดยไม่ต้องใช้จาวาสคริปต์) แล้ว

— nirazul

1

ฉันชอบวิธีแก้ปัญหานี้จริงๆ มันสนุกและแสดงให้เห็นว่าไม่เพียง แต่คุณสามารถจัดการ html ของคุณด้วย css แต่คุณยังสามารถทำได้ด้วยความช่วยเหลือของ jquery

— csichar

6

วิธีนี้จะไม่ทำงานหากความสูงของคอลัมน์เปลี่ยนไป สิ่งนี้อาจเกิดขึ้นได้หากเนื้อหาของคอลัมน์มีการเปลี่ยนแปลง ต้องมีการเรียกใช้ฟังก์ชันนี้: ในการเปลี่ยนแปลงเนื้อหาและ. บนการปรับขนาดเบราว์เซอร์ แนวทาง css เหมาะสมกว่าเนื่องจากหลีกเลี่ยงข้อกังวลเหล่านี้

— alexreardon

5

นี่เป็นปัญหาคลาสสิกใน CSS ไม่มีวิธีแก้ปัญหานี้จริงๆ

บทความนี้จาก A List Apartเป็นบทความที่ดีเกี่ยวกับปัญหานี้ โดยใช้เทคนิคที่เรียกว่า "คอลัมน์ faux" โดยใช้ภาพพื้นหลังเรียงต่อกันในแนวตั้งบนองค์ประกอบที่มีคอลัมน์ที่สร้างภาพลวงตาของคอลัมน์ที่มีความยาวเท่ากัน เนื่องจากมันอยู่บนกระดาษห่อขององค์ประกอบที่ลอยจึงมีความยาวเท่ากับองค์ประกอบที่ยาวที่สุด

บรรณาธิการ A List Apart มีหมายเหตุในบทความนี้:

หมายเหตุจากบรรณาธิการ: แม้ว่าบทความนี้จะยอดเยี่ยม แต่บทความนี้อาจไม่สะท้อนแนวทางปฏิบัติที่ดีที่สุดในปัจจุบัน

เทคนิคนี้ต้องใช้การออกแบบความกว้างคงที่โดยสิ้นเชิงซึ่งไม่สามารถใช้ได้ดีกับเค้าโครงของเหลวและเทคนิคการออกแบบที่ตอบสนองซึ่งเป็นที่นิยมในปัจจุบันสำหรับไซต์ข้ามอุปกรณ์ อย่างไรก็ตามสำหรับไซต์ความกว้างคงที่เป็นตัวเลือกที่เชื่อถือได้

— Philippe Leybaert
แหล่งที่มา

ขอบคุณที่ดูเหมือนเป็นการแฮ็กที่ดี อย่างไรก็ตามฉันลืมบอกไปว่าคอลัมน์ทางขวาควรมีข้อความอยู่ตรงกลางในแนวตั้ง ฉันคิดถูกหรือเปล่าที่เชื่อว่าคอลัมน์เทียมไม่สามารถทำสิ่งนี้ได้

— Deniz Dogan

4

ฉันมีปัญหาที่คล้ายกันและในความคิดของฉันตัวเลือกที่ดีที่สุดคือใช้ javascript หรือ jquery เพียงเล็กน้อย

คุณสามารถรับ div ที่ต้องการให้มีความสูงเท่ากันได้โดยรับค่า div สูงสุดและใช้ค่านั้นกับ div อื่น ๆ ทั้งหมด หากคุณมี div จำนวนมากและวิธีแก้ปัญหามากมายฉันขอแนะนำให้เขียนโค้ด js ล่วงหน้าเล็กน้อยเพื่อค้นหาว่า div ใดสูงที่สุดจากนั้นใช้ค่านั้น

ด้วย jquery และ 2 div มันง่ายมากนี่คือโค้ดตัวอย่าง:

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

และสุดท้ายมี 1 สิ่งสุดท้าย ช่องว่างภายใน (ด้านบนและด้านล่าง) ต้องเหมือนกัน! หากมีช่องว่างภายในที่ใหญ่กว่าคุณจำเป็นต้องขจัดความแตกต่างของช่องว่างภายใน

— นาย Br
แหล่งที่มา

1

เท่าที่ฉันทราบคุณไม่สามารถทำได้โดยใช้การใช้งาน CSS ในปัจจุบัน ในการสร้างสองคอลัมน์ให้มีความสูงเท่ากันคุณต้องมี JS

— คาลินดอน
แหล่งที่มา

1

สิ่งนี้ใช้ได้กับฉันใน IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows)

ยังใช้งานได้ใน IE 6 หากคุณไม่ใส่เครื่องหมาย div ที่ชัดเจนที่ด้านล่าง แก้ไข : ตามที่ Natalie Downe กล่าวคุณสามารถเพิ่มwidth: 100%;เข้าไป#containerแทนได้

<!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>

ฉันไม่รู้วิธี CSS ในการจัดกึ่งกลางข้อความในแนวตั้งใน div ที่ถูกต้องหาก div ไม่ได้มีความสูงคงที่ หากเป็นเช่นนั้นคุณสามารถตั้งค่าline-heightให้เป็นค่าเดียวกับความสูง div และวาง div display: inline; line-height: 110%ที่ภายในมีข้อความของคุณด้วย

— อินสแตนซ์ของฉัน
แหล่งที่มา

1

ด้วยการใช้ Javascript คุณสามารถทำให้แท็ก div ทั้งสองมีความสูงเท่ากันได้ div ที่เล็กกว่าจะปรับให้มีความสูงเท่ากับแท็ก div ที่สูงที่สุดโดยใช้โค้ดที่แสดงด้านล่าง:

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';
}

โดย "ซ้าย" และ "ขวา" เป็นรหัสของแท็ก div

— ควินทอกซ์ 303
แหล่งที่มา

1

โดยใช้คุณสมบัติ 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>

ขยายข้อมูลโค้ด

0

ใช้ JS ใช้data-same-height="group_name"ในองค์ประกอบทั้งหมดที่คุณต้องการที่จะมีเหมือนกันสูง

ตัวอย่าง: https://jsfiddle.net/eoom2b82/

รหัส:

$(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();
});

— วิเลียม
แหล่งที่มา

0

ฉันต้องการทำสิ่งที่คล้ายกันนี่คือการนำไปใช้ของฉัน สรุปวัตถุประสงค์คือการมี 2 องค์ประกอบที่ใช้ความกว้างของคอนเทนเนอร์หลักที่กำหนดและความสูงจะสูงเท่าที่จำเป็นเท่านั้น ความสูงโดยพื้นฐานเท่ากับความสูงสูงสุดของเนื้อหาจำนวนมากที่สุด แต่ภาชนะอื่น ๆ จะถูกล้าง

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%;
}

— ผู้ชายคนนี้
แหล่งที่มา

0

หลายปีที่ผ่านมาfloatของสถานที่ที่ใช้ในการแก้ปัญหาว่าด้วยtableวิธีการใช้display: table;และและdisplay: table-row;display: table-cell;

แต่ตอนนี้ด้วยคุณสมบัติ flex คุณสามารถแก้ปัญหาได้ด้วยโค้ด 3 บรรทัด: display: flex;และflex-wrap: wrap;และ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%คือflexค่าที่เราให้: flex-grow flex-shrink flex-basisตามลำดับ เป็นทางลัดที่ค่อนข้างใหม่ใน flexbox เพื่อหลีกเลี่ยงการพิมพ์ทีละรายการ ฉันหวังว่านี่จะช่วยใครบางคนได้

— Fouad Boukredine
แหล่งที่มา