ฉันจะรักษาความสูงที่เท่ากันทั้งสองแบบเคียงข้างกันได้อย่างไร

441

ฉันมีสอง divs เคียงข้างกัน ฉันต้องการความสูงของพวกเขาที่จะเหมือนกันและอยู่ในระดับเดียวกันหากหนึ่งในนั้นปรับขนาด ฉันไม่สามารถคิดออกนี้ ไอเดีย?

เพื่อชี้แจงคำถามที่สับสนของฉันฉันต้องการให้ทั้งสองกล่องมีขนาดเท่ากันเสมอดังนั้นหากหนึ่งกล่องโตขึ้นเนื่องจากมีการใส่ข้อความไว้อีกกล่องควรจะตรงกับความสูง

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>
ขยายตัวอย่างข้อมูล

html  css  html-table  flexbox 
— NibblyPig
แหล่งที่มา
คุณต้องการที่หรือไม่หากหนึ่งในนั้นมีขนาดใหญ่กว่าอีกอันหนึ่งจะมีขนาดความสูงเท่ากัน?
— Wai Wong
ตัวอย่างที่ไม่ได้เป็นวิธีแก้ปัญหา แต่อยู่ในสภาพแวดล้อมที่สามารถแก้ไขได้ที่นี่: jsfiddle.net/PCJUQ
— MvanGeest
— C. Hare

คำตอบ:

592

flexbox

ด้วย flexbox มันเป็นการประกาศเพียงครั้งเดียว:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
ขยายตัวอย่างข้อมูล

คำนำหน้าอาจจะจำเป็นสำหรับเบราว์เซอร์รุ่นเก่าให้ดูที่การสนับสนุนเบราว์เซอร์

— Pavlo
แหล่งที่มา
17
flexbox ทำงานเหมือนจับใจ หากคุณกำลังพัฒนาการออกแบบที่ตอบสนองและคุณต้องการให้ div ที่สองของคุณลงไปในหน้าจอขนาดเล็กคุณจะต้องตั้งค่า. row เพื่อแสดง: block; ในการสืบค้นสื่อของคุณ
— Nick Zulu
7
@NickZulu ฉันเชื่อในกรณีนี้คุณควรตั้งค่าflex-direction: column: jsfiddle.net/sdsgW/1
— Pavlo
1
@Eckstein มันไม่จำเป็นสำหรับทั้งสองโซลูชั่น ดูตัวอย่าง
— Pavlo
3
สิ่งนี้ไม่ได้ผลสำหรับฉันจนกว่าฉันจะเพิ่มส่วนสูง: 100%; ไปยังคอลัมน์เด็ก ๆ
— Jacob Raccuia
1
เป็นไปได้ไหมที่จะทำให้ div ลูกคนหนึ่งระบุความสูงของอีกฝ่าย? ดังนั้นถ้าเนื้อหาของ div ลูกอื่นกำลังเปลี่ยนแปลงมันจะไม่สามารถเปลี่ยนความสูงของ div เฉพาะนั้นได้
— Narek Malkhasyan
149

นี่เป็นปัญหาทั่วไปที่หลายคนประสบ แต่โชคดีที่มีคนฉลาดเช่นEd Eliot บนบล็อกของเขาโพสต์โซลูชั่นออนไลน์

โดยทั่วไปสิ่งที่คุณทำคือการทำให้ divs ทั้ง / คอลัมน์มากสูงโดยการเพิ่มpadding-bottom: 100%แล้ว "เคล็ดลับเบราว์เซอร์" margin-bottom: -100%ในความคิดของพวกเขาไม่ได้ว่าสูงใช้ มันอธิบายได้ดีกว่าโดย Ed Eliot ในบล็อกของเขาซึ่งรวมถึงตัวอย่างมากมาย

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>
ขยายตัวอย่างข้อมูล

— แลมบ์ดา
แหล่งที่มา
1
คำอธิบายเกี่ยวกับ One True Layout นั้นแย่เล็กน้อย แต่หลังจากตรวจสอบลิงค์แรกฉันใช้มันได้ดีจากหนึ่งในตัวอย่างที่เขาใช้ อย่างไรก็ตามมันแย่มากเพราะคุณต้องใช้รูปภาพเพื่อแสดงขอบด้านล่างของคอลัมน์และน่าสงสัยสำหรับการสนับสนุนข้ามเบราว์เซอร์ อย่างไรก็ตามมันใช้งานได้และไม่ได้ใช้จาวาสคริปต์ดังนั้นฉันจะทำเครื่องหมายว่าถูกต้อง ขอบคุณ!
— NibblyPig
ดูเหมือนจะไม่ทำงานในเบราว์เซอร์ IE รุ่นเก่า (ใช่ แต่น่าเสียดายที่ฉันยังต้องรองรับ IE6) มีวิธีใดบ้างที่จะทำให้สิ่งนี้เข้ากันได้?
— Strongriley
1
บล็อกของ @strongriley Checkout Ed Eliot: ejeliot.com/blog/61มันควรจะทำงานใน IE6 บางทีปัญหาเกิดจากที่อื่น?
— mqchen
1
สิ่งนี้จะทำลายถ้าหน้าต่างแคบเกินไปและวาง Divs ไว้ใต้กัน
— WhyNotHugo
1
คุณจะกำหนดเซลล์ที่เป็นช่องว่างที่คุณต้องการให้ปรากฏในเซลล์ตารางได้เช่นpadding: 7px 10pxถ้าpadding-bottomตั้งค่าคุณสมบัติเป็น 100% ( overflow:hiddenต้องใช้PS กับฉันด้วยrow)
— user1063287
55

นี่คือพื้นที่ที่ CSS ไม่เคยมีวิธีแก้ปัญหาใด ๆ จริงๆ - คุณใช้<table>แท็ก (หรือแกล้งทำโดยใช้display:table*ค่าCSS ) เนื่องจากเป็นสถานที่เดียวที่มีการใช้งาน

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

สิ่งนี้ใช้ได้กับ Firefox, Chrome และ Safari, Opera ทุกรุ่นอย่างน้อย 8 และ IE จากรุ่น 8

— Paul D. Waite
แหล่งที่มา
5
โซลูชันนี้ไม่สามารถใช้ได้กับผู้ที่ต้องการรองรับ IE6 / IE7 แต่ฉันเชื่อว่าเป็นวิธีที่สะอาดที่สุด
— twsaef
2
คำตอบนี้สมบูรณ์แบบ! เพียงแค่เตือนความจำขนาดเล็ก: มันอาจจะเกิดขึ้นว่าลูกค้าบางส่วนต้องใช้ "ตาราง" แทน "ตารางแถว"
— tiborka
@ user2025810: แย่แล้วขอบคุณ คุณรู้หรือไม่ว่าลูกค้าtableคนtable-rowไหนต้องการแทนที่จะเป็น
— Paul D. Waite
@ user2025810: yikes ไม่สามารถพูดได้ว่าฉันเคยทดสอบ :) ที่ดีที่จะรู้ว่าไชโย (ด้วยความมุ่งมั่นของ PDF ฉันคิดว่ามันรองรับฟีเจอร์บางอย่างที่เกี่ยวข้องกับการพิมพ์ของ CSS 2.1 ที่ไม่ได้ใช้งานได้ดีในเบราว์เซอร์)
— Paul D. Waite
7
ด้วยโซลูชันนี้ - ลืมเกี่ยวกับการใช้เปอร์เซ็นต์widthสำหรับ div ของคุณยกเว้นว่าคุณเพิ่มdisplay: tableองค์ประกอบหลักซึ่งจะทำให้เกิดความยุ่งเหยิง
— Alex G
42

ใช้ jQuery

การใช้ jQuery คุณสามารถทำได้ด้วยสคริปต์บรรทัดเดียวที่ง่ายสุด ๆ

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

ใช้ CSS

มันน่าสนใจกว่านิดหน่อย เทคนิคที่เรียกว่าคอลัมน์ Faux มากขึ้นหรือน้อยลงคุณไม่ได้ตั้งค่าความสูงจริงให้เท่าเดิม แต่คุณเพิ่มองค์ประกอบกราฟิกบางอย่างเพื่อให้พวกเขามีความสูงเท่ากัน

— Derek Adair
แหล่งที่มา
ฉันคิดว่าการใช้ JavaScript เป็นวิธีที่ดีมาก ปัญหาคือ - มันแยกออกหากปิดการใช้งาน ฉันคิดว่าฉันจะใช้มันต่อไปและสร้างความบังเอิญที่ดีที่สุดที่ฉันสามารถทำได้ -) ขอบคุณ!
— nicorellius
13
นี่ก็หมายความว่าความสูงของคอลัมน์หนึ่งนั้นใหญ่กว่าค่าของคอลัมน์สองเสมอ
— Sébastien Richer
1
คุณควรเปรียบเทียบความสูงของคอลัมน์ก่อนที่จะใช้ความสูงสำหรับพวกเขา ฉันคิดว่า js เป็นวิธีที่ดีที่สุดสำหรับปัญหานี้เบราว์เซอร์เกือบทั้งหมดเปิดใช้งาน js ถ้าไม่พวกเขาควรออกจากเว็บไซต์ของคุณและเว็บไซต์อื่น ๆ อีกมากมาย
— SalmanShariati
6
สิ่งนี้จะใช้ได้เฉพาะเมื่อโหลดหน้าเว็บครั้งแรกเท่านั้น หากหน้าต่างถูกปรับขนาดแล้วทำให้ div ปรับขนาดแล้วพวกเขาจะไม่ซิงค์กัน
— ikariw
16

ฉันประหลาดใจที่ไม่มีใครพูดถึงเทคนิคคอลัมน์ Absolute (เก่ามาก แต่น่าเชื่อถือ): http://24ways.org/2008/absolute-columns/

ในความคิดของฉันมันเหนือกว่าทั้งเทคนิคคอลัมม์มารยาทและ One True Layout

ความคิดทั่วไปคือเป็นองค์ประกอบที่มีตำแหน่งพระทัยกับองค์ประกอบหลักที่ใกล้ที่สุดที่มีposition: absolute; position: relative;จากนั้นคุณขยายคอลัมน์เพื่อเติมเต็มความสูง 100% โดยกำหนดทั้ง a top: 0px;และbottom: 0px;(หรือพิกเซล / เปอร์เซ็นต์ใด ๆ ที่คุณต้องการ) นี่คือตัวอย่าง:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>
— geofflee
แหล่งที่มา
1
หากคอลัมน์ด้านขวามีบรรทัดมากกว่าด้านซ้ายเนื้อหาจะล้น
— เดวิด
11

คุณสามารถใช้ปลั๊กอิน Equal Heights ของ Jquery เพื่อให้บรรลุผลปลั๊กอินนี้ทำให้ div ทั้งหมดมีความสูงเท่ากันทุกประการ หากหนึ่งในนั้นเติบโตและอื่น ๆ ก็จะเติบโต

นี่คือตัวอย่างของการใช้งาน

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

นี่คือลิงค์

http://www.cssnewbie.com/equalheights-jquery-plugin/

— StarX
แหล่งที่มา
8

คุณสามารถใช้คอลัมน์ Faux

โดยทั่วไปจะใช้ภาพพื้นหลังใน DIV ที่มีเพื่อจำลองสองความสูงเท่ากัน -DIV การใช้เทคนิคนี้ยังช่วยให้คุณเพิ่มเงามุมโค้งมนเส้นขอบที่กำหนดเองหรือรูปแบบขี้ขลาดอื่น ๆ ลงในภาชนะบรรจุของคุณ

ใช้ได้กับกล่องที่มีความกว้างคงที่เท่านั้น

ทดสอบอย่างดีและทำงานอย่างถูกต้องในทุกเบราว์เซอร์

— Arve Systad
แหล่งที่มา
7

เพิ่งพบกระทู้นี้ในขณะที่ค้นหาคำตอบนี้ ฉันเพิ่งทำฟังก์ชั่น jQuery เล็ก ๆ หวังว่านี่จะช่วยได้ผลเหมือนมีเสน่ห์:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>
— ไมค์เวลส์
แหล่งที่มา
1
ฉันใช้ OuterHeight เพื่อรวมการขยายและเส้นขอบ นี่คือทางออกที่สะอาดที่สุดที่ฉันคิด
— Sébastien Richer
โซลูชั่นที่สมบูรณ์แบบที่ฉันกำลังมองหา โซลูชันอื่น ๆ นั้นดีสำหรับกรณีที่แถวมีคอลัมน์ไม่กี่คอลัมน์ แต่วิธีนี้ดีกว่าสำหรับเนื้อหา html ที่ซับซ้อน การเพิ่มขนาดเล็ก: เมื่อปรับขนาดเอกสารในหน้าตอบสนองความสูงเนื้อหาจะไม่เปลี่ยนแปลงเนื่องจากการแก้ไข ดังนั้นฉันเพิ่ม $ ('. inner'). css ({height: "initial"}); ก่อน 'แต่ละฟังก์ชั่น' เพื่อตั้งค่าความสูงเป็นค่าเริ่มต้น
— bafsar
5

วิธีกริด CSS

วิธีที่ทันสมัยในการทำเช่นนี้ (ซึ่งหลีกเลี่ยงการต้องประกาศ<div class="row"></div>-wrapper รอบ ๆ สองรายการ) คือการใช้ประโยชน์จากตาราง CSS สิ่งนี้ยังช่วยให้คุณควบคุมช่องว่างระหว่างแถว / คอลัมน์รายการของคุณได้ง่าย

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>
ขยายตัวอย่างข้อมูล

— connexo
แหล่งที่มา
4

คำถามนี้ถูกถามเมื่อ 6 ปีที่แล้ว แต่มันก็คุ้มค่าที่จะให้คำตอบง่ายๆกับเค้าโครงflexboxทุกวันนี้

เพียงเพิ่ม CSS ต่อไปนี้เข้ากับพ่อ<div>มันจะทำงาน

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

สองบรรทัดแรกประกาศว่าจะแสดงเป็น flexbox และflex-direction: rowบอกเบราว์เซอร์ว่าลูก ๆ ของมันจะแสดงในคอลัมน์ และalign-items: stretchจะตอบสนองความต้องการที่องค์ประกอบของเด็กทุกคนจะยืดให้สูงเท่ากันหนึ่งในนั้นจะสูงขึ้น

— Hegwin
แหล่งที่มา
1
@TylerH แต่คำถามมีการแก้ไขคำถามของเขาและเพิ่มI'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.ซึ่งไม่ได้กล่าวถึงในคำตอบที่ยอมรับ ... ฉันเพิ่งจะเสร็จที่นี่ บางทีฉันควรจะแสดงความคิดเห็นในคำตอบที่ยอมรับ?
— Hegwin
1
ไม่ได้กล่าวถึงอย่างชัดเจนเนื่องจากมีการประกาศ CSS อย่างง่ายอยู่แล้ว เปิดตัวอย่างคำตอบในแบบเต็มหน้าจอและปรับขนาดหน้าต่างเบราว์เซอร์ของคุณเพื่อดู พวกมันมีขนาดเท่ากัน
— TylerH
1
แม้ว่าคำตอบที่ได้รับการยอมรับจะใช้ flexbox แต่คำตอบนี้ก็มีวิธีการที่แตกต่างออกไป align-items: stretch คือสิ่งที่ทำให้ฉันอยู่บนเส้นทางเพื่อแก้ไขปัญหาของฉันในสถานการณ์ที่เฉพาะเจาะจง
— BenoitLussier
ไม่align-items: stretch;งอเป็นค่าเริ่มต้นหรือไม่
— madav
3

การใช้ CSS Flexbox และความสูงขั้นต่ำใช้ได้สำหรับฉัน

ป้อนคำอธิบายรูปภาพที่นี่

สมมติว่าคุณมีตู้คอนเทนเนอร์ที่มีสองกองข้างในและคุณต้องการให้กองทั้งสองนั้นมีความสูงเท่ากัน

คุณจะตั้ง ' display: flex ' บนคอนเทนเนอร์รวมถึง ' align-items: stretch '

จากนั้นให้เด็กหาร ' ความสูงขั้นต่ำ ' ของ 100%

ดูรหัสด้านล่าง

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>
ขยายตัวอย่างข้อมูล

— RealMJDev
แหล่งที่มา
2

หากคุณไม่คิดว่าหนึ่งในนั้นdivคือการเป็นผู้ชำนาญและควบคุมความสูงของทั้งคู่divนั่นก็คือ:

ซอ

ไม่ว่าอะไรก็ตามdivทางด้านขวาจะขยายหรือบีบ & ล้นเพื่อให้ตรงกับความสูงของdivด้านซ้าย

ทั้งสอง divจะต้องเป็นลูกของภาชนะบรรจุทันทีและต้องระบุความกว้างภายในภาชนะ

CSS ที่เกี่ยวข้อง:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}
— Hashbrown
แหล่งที่มา
2

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

ด้วยวิธีการเหล่านี้คุณสามารถกำหนดระยะห่างระหว่างคอลัมน์เส้นขอบ ฯลฯ

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>
ขยายตัวอย่างข้อมูล

— Adrian Menendez
แหล่งที่มา
1

ซอ

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}
— drjorgepolanco
แหล่งที่มา
1

ฉันได้ลองวิธีการที่กล่าวถึงข้างต้นเกือบทั้งหมดแล้ว แต่โซลูชัน flexbox ไม่ทำงานอย่างถูกต้องกับ Safari และวิธีการจัดวางกริดจะไม่ทำงานอย่างถูกต้องกับ IE เวอร์ชันเก่ากว่า

โซลูชันนี้เหมาะกับหน้าจอทั้งหมดและเข้ากันได้กับเบราว์เซอร์ข้าม:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

วิธีการข้างต้นจะเท่ากับความสูงของเซลล์และสำหรับหน้าจอขนาดเล็กเช่นมือถือหรือแท็บเล็ตเราสามารถใช้@mediaวิธีการดังกล่าว

— Jodyshop
แหล่งที่มา
0

คุณสามารถใช้ jQuery เพื่อให้บรรลุเป้าหมายนี้ได้อย่างง่ายดาย

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

คุณจะต้องรวมjQuery

— pixeltocode
แหล่งที่มา
1
สิ่งนี้จะไม่ทำงานหากทั้งคู่<div>มีเนื้อหาแบบไดนามิก เหตุผลที่ฉันพูดคือถ้า<div class="right">มีเนื้อหาเพิ่มเติมที่เกิดปัญหาอื่น ๆ
— Surya
0

ฉันรู้ว่ามันใช้เวลานาน แต่ฉันก็แบ่งปันวิธีแก้ปัญหาของฉันอยู่ดี นี่เป็นเคล็ดลับ jQuery

--- HTML 

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- JQUERY

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>
— Roy Vincent
แหล่งที่มา
-1

นี่คือปลั๊กอิน jQuery ซึ่งตั้งค่าความสูงเท่ากับองค์ประกอบทั้งหมดในแถวเดียวกัน (โดยการตรวจสอบ offset.top ขององค์ประกอบ) ดังนั้นหากอาร์เรย์ jQuery ของคุณมีองค์ประกอบจากมากกว่าหนึ่งแถว (offset.top ที่แตกต่างกัน) แต่ละแถวจะมีความสูงแยกจากกันตามองค์ประกอบที่มีความสูงสูงสุดในแถวนั้น

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

— DéjánKőŕdić
แหล่งที่มา
-2 
    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });
— tcao
แหล่งที่มา
1
โปรดให้ความเห็นใด ๆ กับคำตอบของคุณ
— sgnsajgon
-2

ฉันมีปัญหาเดียวกันดังนั้นฉันจึงสร้างฟังก์ชั่นเล็ก ๆ นี้โดยใช้ jquery เพราะ jquery เป็นส่วนหนึ่งของเว็บแอปพลิเคชั่นทุกวันนี้

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

คุณสามารถเรียกใช้ฟังก์ชั่นนี้ในเหตุการณ์พร้อมหน้า

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

ฉันหวังว่าสิ่งนี้จะได้ผลสำหรับคุณ

— โปรแกรมเมอร์ปริญญาโท
แหล่งที่มา
-3

ฉันเพิ่งเจอสิ่งนี้และไม่ชอบวิธีแก้ไขปัญหาดังนั้นฉันจึงลองทำการทดลอง

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

— tushar747
แหล่งที่มา
-4 
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

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

— ไหว้วงศ์
แหล่งที่มา
OP ต้องการให้ div มีความสูงเท่ากันเสมอ
— Simon Forsberg
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.