HTML / CSS: İki kayan div'i aynı yükseklikte yapma

106

Şu anda a kullanarak çözdüğüm küçük bir sorunum var table, aşağıya bakın. Temel olarak, iki div'in mevcut genişliğin% 100'ünü kaplamasını, ancak yalnızca gerektiği kadar dikey alan kaplamasını istiyorum (ki bu aslında resimden çok da açık değil). İkisi, gösterildiği gibi, aralarında küçük bir çizgi ile her zaman aynı yüksekliğe sahip olmalıdır.

alternatif metin
(kaynak: pici.se )

tableŞu anda yaptığım gibi, bunu kullanmak çok kolay . Bununla birlikte, anlamsal olarak bu aslında bir tablo olmadığı için çözüme çok meraklı değilim.

html  css  html-table 
— Deniz Doğan
kaynak
2
Eee ... resim nerede? Bu konuda yorum yapmak için çok geç olduğumu biliyorum
— Ajay Kulkarni
— DidThis

Yanıtlar:

160

CSS'de eşit yükseklikteki sütunları, büyük miktarda alt dolgu uygulayarak, aynı miktarda alt negatif kenar boşluğu uygulayarak ve sütunları taşma gizlenmiş bir div ile çevreleyerek elde edebilirsiniz. Metni dikey olarak ortalamak biraz daha zordur ancak bu yolda size yardımcı olacaktır.

#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>
Snippet'i genişlet

Sanırım bundan bahsetmeye değer streetpc tarafından verilen önceki cevap geçersiz html içeriyor, doctype XHTML'dir ve özniteliklerin etrafında tek tırnak işaretleri vardır. Ayrıca kayda değer şudur kiclearkonteynerin iç yüzerlerini temizlemek için üzerinde fazladan bir elemana ihtiyacınız yoktur . Eğer gizli taşma kullanırsanız, bu, tüm IE olmayan tarayıcılardaki kayan sayıları temizler ve daha sonra hasLayout vermek için genişlik veya yakınlaştırma gibi bir şey eklemek: 1, IE'nin dahili kayan noktalarını temizlemesine neden olur.

Bunu tüm modern tarayıcılarda FF3 + Opera9 + Chrome Safari 3+ ve IE6 / 7 / 8'de test ettim. Çirkin bir numara gibi görünebilir ama iyi çalışıyor ve bunu üretimde çok kullanıyorum.

Umarım bu yardımcı olur.

— Natalie Downe
kaynak
1
Verdiğim kod W3C'nin doğrulayıcısında doğruluyor (peki, bir <title> öğesi eklediğinizde, ki bu sizin amacınız değildi). Dahası, spesifikasyonlar bu tartışmaya göre tek tırnakların kullanımına izin verir: sitepoint.com/forums/showthread.php?t=54273#6
— instanceof me
1
Özür dilerim, benim hatam. Yukarıdaki cevabımı değiştirdim. Yine de, yönteminizle, sağ sütun soldan daha büyük olursa, iki kutu tam olarak doğru yükseklik olmadığından kırmızı altta görünür. Tasarıma bağlı olarak ya sahte sütunları ya da alt kenar boşlukları ve dolgulu bu yöntemi tercih ederim.
— Natalie Downe
2
Aslında Kevin C.'nin gölgelerin kesilmesiyle ilgili verdiği çözüm üst, sol ve sağ dolgularda işe yararken, altta çalışmıyor. Şimdiye kadar bir çözüm bulamadık.
— JeanMertz
1
İyi iş Natalie. @laarsk Öngörülemeyen yükseklik tam olarak bunun için değil mi? Demoyu izleyin : jsfiddle.net/RT3MT/4 "daha uzun" paragrafları görmek için hareket ettirin
— jpillora
1
Bu şimdiye kadar gördüğüm en çirkin CSS hack'lerinden biri, ancak onu açık kollarla kucaklayacağım lol. İlerlemenin tek yolu bu gibi görünüyor
— Matt Vukas
98

Bu yıl 2012 + n öyleyse IE6 / 7 hakkında artık bakımı, display:table, display:table-rowve display:table-celltüm modern tarayıcılarda çalışır:

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

2016-06-17 Güncellemesi: Zamanın geldiğini düşünüyorsanız display:flex, Flexbox Froggy'ye göz atın .

— Dmitry Leskov
kaynak
30
Bu cevabın yerini aldığında hangi yıl olacak display: flex?
— LandonSchropp
12
Hayır, şimdi
— 2014'teyiz
9
aaaaaa ve 2015 yılı belki yıl sonunda gösterilecek cevabı değiştirebiliriz: flex :)
— MetalWeirdo
5
Hala 1950'lerde yaşıyorum.
— Jay
1
2016'dan merhaba! Şimdi esnek kullanabiliriz
— Brett Gregson
20

Bunu başarmak için flexbox kullanmalısınız. IE8 ve IE9'da desteklenmez ve yalnızca IE10'daki -ms önekiyle desteklenir, ancak diğer tüm tarayıcılar bunu destekler. Satıcı önekleri için, ayrıca kullanmalısınız 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
kaynak
1
Flex ile yaşadığım sorun, sütunların etrafında bir sarmalayıcıya ihtiyaç duyması. Floats + display: table tekniği ile, örneğin bir başlık ve bir grup sütuna sahip olabilirim ve efekt, başlığı etkilemeden sütunlarda çalışır.
— Stijn de Witt
10

bunu js ile çalıştırabilirsiniz:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
— Andi P. Trix
kaynak
1
Lütfen bu sorunun zaten oldukça eski olduğunu ve daha iyi çözümlerin (javascript gerekmeden) sağlanmış olduğunu unutmayın.
— nirazul
1
Aslında bu çözümü beğendim. Bu Diyelim ki css ile html manipüle edebilir, ama aynı zamanda jquery yardımı ile bunu yapabilir sadece eğlenceli ve şovlar
— csichar
6
Sütunların yüksekliği değişirse bu çözüm işe yaramayacaktır. Bu, sütunların içeriği değiştirilirse gerçekleşebilir. Bu işlevin çalıştırılması gerekir: içerik değişikliği ve .on tarayıcı yeniden boyutlandırıldığında. CSS yaklaşımı bu endişeleri ortadan
— kaldırdığı
5

Bu, CSS'de klasik bir sorundur. Bunun için gerçekten bir çözüm yok.

A List Apart'ın bu makalesi , bu sorun hakkında iyi bir okuma niteliğindedir. Eşit uzunlukta sütunlar yanılsamasını yaratan sütunları içeren eleman üzerinde dikey olarak döşenmiş bir arka plan görüntüsüne sahip olan "sahte sütunlar" adı verilen bir teknik kullanır . Yüzen elemanların sarmalayıcısı üzerinde olduğu için en uzun eleman kadardır.

A List Apart editörlerinin makale hakkında şu notu var:

Editörlerden bir not: Bu makale, zamanına göre mükemmel olsa da modern en iyi uygulamaları yansıtmayabilir.

Teknik, günümüzde cihazlar arası siteler için popüler olan akışkan düzenler ve duyarlı tasarım teknikleriyle iyi çalışmayan tamamen statik genişlik tasarımları gerektirir. Ancak statik genişlikli siteler için güvenilir bir seçenektir.

— Philippe Leybaert
kaynak
Teşekkür ederim, bu güzel bir hack gibi görünüyor. Ancak, sağ sütunun içinde dikey olarak ortalanmış metin olması gerektiğini söylemeyi unuttum. Sahte sütunların bunu yapamayacağına inanmakta haklı mıyım?
— Deniz Doğan
4

Benzer bir sorun yaşadım ve bence en iyi seçenek biraz javascript veya jquery kullanmak.

En yüksek div değerini alarak ve bu değeri diğer tüm div'lere uygulayarak istenen div'lerin aynı yükseklikte olmasını sağlayabilirsiniz. Çok sayıda div'iniz ve birçok çözümünüz varsa, tüm div'lerin hangisinin en yüksek olduğunu bulmak için çok az gelişmiş js kodu yazmanızı ve sonra değerini kullanmanızı öneririm.

Jquery ve 2 div ile çok basit, işte örnek kod:

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

Ve son olarak, son 1 şey var. Dolguları (üst ve alt) aynı olmalıdır! Birinde daha büyük dolgu varsa, dolgu farkını ortadan kaldırmanız gerekir.

— Bay Br
kaynak
1

Bildiğim kadarıyla, bunu mevcut CSS uygulamalarını kullanarak yapamazsınız. İki sütun yapmak için, eşit yükseklikte JS'ye ihtiyacınız var.

— Calin Don
kaynak
1

Bu benim için IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows) için çalışıyor.

Alttaki daha net olan div'i kaldırırsanız IE 6'da da çalışır. Düzenleme : Natalie Downe söylediği gibi, sadece ekleyebilir width: 100%;için #containeryerine.

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

Div sabit yükseklikte değilse, metni sağ div'de dikey olarak ortalamanın bir CSS yolunu bilmiyorum. Öyleyse line-height, div yüksekliğiyle aynı değere ayarlayabilir ve metninizi içeren bir iç div koyabilirsiniz display: inline; line-height: 110%.

— benim örneğim
kaynak
1

Javascript kullanarak, iki div etiketini aynı yükseklikte yapabilirsiniz. Daha küçük div, aşağıda gösterilen kod kullanılarak en yüksek div etiketiyle aynı yüksekliğe ayarlanacaktır: 

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 etiketlerinin id'leri "sol" ve "sağ" ile.

— Quintox303
kaynak
1

Css özelliğini kullanarak -> 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>
Snippet'i genişlet

0

JS kullanarak data-same-height="group_name", aynı yüksekliğe sahip olmasını istediğiniz tüm öğelerde kullanın .

Örnek: https://jsfiddle.net/eoom2b82/

Kod:

$(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
kaynak
0

Benzer bir şey yapmam gerekiyordu, işte benim uygulamam. Amacı özetlemek gerekirse, belirli bir ana kabın genişliğini alan 2 öğeye sahip olmak ve yüksekliğin yalnızca olması gerektiği kadar yüksek olmasıdır. Esasen yükseklik, en büyük miktardaki içeriğin maksimum yüksekliğine eşittir, ancak diğer kapsayıcı düzdür.

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%;
}
— bu adam
kaynak
0

Birkaç yıl önce, floatmülk bu sorunu ve ve tablekullanarak yaklaşımla çözüyordu .display: table;display: table-row;display: table-cell;

Ama şimdi flex özelliği ile bunu 3 satır kodla çözebilirsiniz: display: flex;ve flex-wrap: wrap;veflex: 1 0 50%;

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

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

1 0 50%Verdiğimiz flexdeğerlerdir: flex-grow flex-shrink flex-basissırasıyla. Tek tek yazmaktan kaçınmak için flexbox'ta nispeten yeni bir kısayol. Umarım bu oradaki birine yardımcı olur

— Fouad Boukredine
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.