Çocuk div değerini, ebeveynin yüksekliğini belirtmeden ebeveyn div'in yüksekliğinin% 100'ü olmaya nasıl zorlarsınız?

Aşağıdaki yapıya sahip bir sitem var:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Gezinme solda ve içerik div sağda. İçerik div bilgisi PHP ile alınır, bu yüzden her seferinde farklıdır.

Hangi sayfa yüklenirse yüklensin, yüksekliği içerik div yüksekliğiyle aynı olacak şekilde gezinmeyi dikey olarak nasıl ölçekleyebilirim?

NOT : Bu yanıt, Flexbox standardını desteklemeyen eski tarayıcılar için geçerlidir. Modern bir yaklaşım için bkz. Https://stackoverflow.com/a/23300532/1155721

Çapraz Tarayıcı CSS'sine Sahip ve Hack Olmadan Eşit Yükseklik Sütunlarına göz atmanızı öneririm .

Temel olarak, bunu CSS ile tarayıcı uyumlu bir şekilde yapmak önemsiz değildir (ancak tablolarla önemsizdir), bu yüzden kendinize uygun bir paketlenmiş çözüm bulun.

Ayrıca, yanıt% 100 yükseklik veya eşit yükseklik isteyip istemediğinize göre değişir. Genellikle eşit yüksekliktedir. % 100 yükseklik ise cevap biraz farklıdır.

Ebeveyn için:

display: flex;

Bazı önekler eklemelisiniz, http://css-tricks.com/using-flexbox/ .

Düzenleme: @Adam Garner belirtildiği gibi, hizalama öğeleri: streç; Gerek yok. Kullanımı çocuklar için değil ebeveynler içindir. Gerdiren çocukları tanımlamak istiyorsanız, hizalama-kendini kullanırsınız.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Bu, tasarımcılarla her zaman uğraşan sinir bozucu bir konudur. İşin püf noktası, CSS'nizdeki BODY ve HTML'de yüksekliği% 100'e ayarlamanız gerektiğidir.

html,body {
    height:100%;
}

Bu görünüşte anlamsız kod, tarayıcıya% 100'ün ne anlama geldiğini tanımlamaktır. Sinir bozucu, evet, ama en basit yol.

Ben iki sütun display: table-cell;yerine ayarı float: left;iyi çalışır buluyorum .

Beklenmedik derecede kısa bir içerik div durumunda gezinme div'inin kırpılmasının bir sakıncası yoksa, en az bir kolay yol vardır:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Yine de sahte sütun tekniği vardır.

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

jQuery kullanarak:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Alt kenar boşluğunu% 100 yapmayı deneyin.

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Bak bu örnekte .

height : <percent>yalnızca üst yüzde piksel, ems vb. sabit yükseklikte belirtilen yüzde yüksekliğe sahip tüm üst düğümleriniz varsa çalışır. Bu şekilde yükseklik, elemanınıza aşağı doğru basamaklanır.

Sayfa yüksekliğinin düğümlerinize kadar basamaklandırılması için @Travis'in daha önce belirtildiği gibi html ve gövde öğelerine% 100 belirtebilirsiniz.

Uzun arama ve denemeden sonra, sorunumu hiçbir şey çözmedi

style = "height:100%;"

çocuk divinde

ve ebeveyn için bunu uygulayın

.parent {
    display: flex;
    flex-direction: column;
}

Ayrıca, bootstrap kullanıyorum ve bu benim için duyarlı bozmadı.

Bu makalede açıklanan yönteme dayanarak ben yarattım. Az dinamik çözüm:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Az:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

display: gridEbeveyne ekle

Ben soru yapıldı beri bir looong zaman oldu biliyorum, ama kolay bir çözüm buldum ve birisi kullanabilirsiniz düşündüm (yoksul ingilizce hakkında üzgünüm). İşte gidiyor:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Basit bir örnek. Duyarlılığa dönüşebileceğinizi unutmayın.

Çözümüm:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Sorunun başlığında ve içeriğinde biraz çelişki var. Başlık bir ana div'den bahseder, ancak soru, iki kardeş div'in (gezinme ve içerik) aynı yükseklikte olmasını istediğiniz gibi görünmesini sağlar.

(A) hem gezinme hem de içeriğin ana yüksekliğinin% 100'ü olmasını mı yoksa (b) gezinme ve içeriğin aynı yükseklikte olmasını mı istiyorsunuz?

(B) varsayalım ... eğer öyleyse, mevcut sayfa yapınız (en azından saf CSS ile ve komut dosyası olmadan) verildiğinde bunu yapabileceğinizi sanmıyorum. Muhtemelen şöyle bir şey yapmanız gerekir:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

ve div içerik bölmesini, gezinme bölmesinin genişliği ne olursa olsun sol kenar boşluğuna sahip olacak şekilde ayarlayın. Bu şekilde, içeriğin içeriği gezinmenin sağında olur ve gezinme div'ini içeriğin yüksekliğinin% 100'ü olarak ayarlayabilirsiniz.

EDIT: Bunu tamamen kafamda yapıyorum, ama muhtemelen navigasyon div'in sol kenar boşluğunu negatif bir değere ayarlamanız veya en sola geri itmek için mutlak solu 0'a ayarlamanız gerekir. Sorun, bunu çekmenin birçok yolu var, ancak hepsi tüm tarayıcılarla uyumlu olmayacak.

[Başka bir cevap Dmity's Less kodu atıfta] Bu bir tür "sözde kod" olduğunu tahmin ediyorum?

Anladığım kadarıyla, hile yapması gereken sahte sütun tekniğini kullanmayı deneyin.

http://www.alistapart.com/articles/fauxcolumns/

Bu yardımcı olur umarım :)

Bu hile işe yarar: HTML bölümünüze açık bir stille son bir öğe ekleme: her ikisi de;

    <div style="clear:both;"></div>

Bundan önceki her şey yüksekliğe dahil edilecektir.

davamda position: absolute;çalışan çocuğa vermek

Sen kullanmak CSS flexbox'a

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Bu cevap CSS flexbox ve CSS'ye uygulandığında ızgara olduğundan artık ideal değil. Ancak yine de çalışan bir çözüm

Daha küçük bir ekranda, col1, col2 ve col3 birbiri üzerine istiflendiğinden yüksekliği otomatik olarak tutmak isteyebilirsiniz.

Ancak, bir medya sorgusu kesme noktasından sonra, tüm sütunlar için eşit yükseklikte sütunların yan yana görünmesini istersiniz.

1125 px yalnızca tüm sütunları aynı yüksekliğe ayarlamak istediğiniz pencere genişliği kesme noktasının bir örneğidir.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

Gerekirse, elbette daha fazla kesme noktası ayarlayabilirsiniz.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

Aynı sorunu yaşadım, Hakam Fostok'un cevabına dayanarak çalıştı, küçük bir örnek oluşturdum, bazı durumlarda eklemek zorunda kalmadan display: flex;ve flex-direction: column;ana kapta çalışabilir

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

Daha önce gösterildiği gibi, flexbox en kolay olanıdır. Örneğin.

#main{ display: flex; align-items:center;}

bu, tüm alt öğeleri üst öğe içindeki merkezle hizalar.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Gönderen:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

ancak bootstrap kullanmanıza gerek yok. Bu eski soruyu cevaplamak, çünkü bu benim için çalıştı ve uygulanması oldukça kolay görünüyor.

Bu, bu sağlanan aynı cevabı ben Soru

Burada position: absoluteiçerik konteyneri ve position: relativeana konteynere dayanan eski moda demosu .

Modern bir şekilde gelince - esnek kutular en iyisidir.

Bunu yapmanın en kolay yolu sadece sahte olmaktır. A List Apart, yıllar boyunca Dan Cederholm'un bu makalesinde olduğu gibi yıllar boyunca bunu kapsamlı bir şekilde ele aldı .

Genelde bunu nasıl yaparım:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

#Container öğesini başka bir div'a sararak, div başlıklarını # kabın kardeşi olarak gömerek ve kenar boşluğu ve genişlik stillerini üst konteynere taşıyarak bu tasarıma kolayca bir başlık ekleyebilirsiniz. Ayrıca, CSS ayrı bir dosyaya taşınmış olmalıdır ve son olarak, Clearfix sınıf bulunabilir vs vs. satır içi tuttu positioniseverything .