Jak zmusić div dziecka do 100% wzrostu div div bez określania wzrostu rodzica?

Mam witrynę o następującej strukturze:

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

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

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

Nawigacja znajduje się po lewej stronie, a div treści po prawej. Informacje dla div treści są pobierane przez PHP, więc za każdym razem są inne.

Jak przeskalować nawigację w pionie, aby jej wysokość była taka sama jak wysokość div zawartości, bez względu na to, która strona jest załadowana?

UWAGA : Ta odpowiedź dotyczy starszych przeglądarek bez obsługi standardu Flexbox. Aby uzyskać nowoczesne podejście, zobacz: https://stackoverflow.com/a/23300532/1155721

Sugeruję przyjrzeć się kolumnom o jednakowej wysokości z CSS między przeglądarkami i bez hacków .

Zasadniczo robienie tego za pomocą CSS w sposób zgodny z przeglądarką nie jest trywialne (ale trywialne z tabelami), więc znajdź sobie odpowiednie wstępnie zapakowane rozwiązanie.

Odpowiedź zależy również od tego, czy chcesz 100% wysokości, czy równej wysokości. Zwykle jest równa wysokość. Jeśli ma 100% wysokości, odpowiedź jest nieco inna.

Dla rodzica:

display: flex;

Powinieneś dodać kilka prefiksów, http://css-tricks.com/using-flexbox/ .

Edycja: Jak zauważył @Adam Garner, wyrównaj elementy: rozciągnij; nie jest potrzebne. Jego użycie jest również dla rodziców, a nie dzieci. Jeśli chcesz zdefiniować rozciąganie dzieci, użyj align-self.

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

To frustrujący problem, z którym cały czas zajmują się projektanci. Sztuka polega na tym, że musisz ustawić wysokość na 100% na BODY i HTML w swoim CSS.

html,body {
    height:100%;
}

Ten pozornie bezcelowy kod ma zdefiniować w przeglądarce, co oznacza 100%. Frustrujące, tak, ale to najprostszy sposób.

Uważam, że ustawienie dwóch kolumn na display: table-cell;zamiast float: left;działa dobrze.

Jeśli nie przeszkadza to, że div nawigacji zostanie przycięty w przypadku nieoczekiwanie krótkiego div treści, istnieje co najmniej jeden prosty sposób:

#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 */
}

W przeciwnym razie istnieje technika sztucznych kolumn .

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

przy użyciu jQuery:

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

Spróbuj ustawić dolny margines na 100%.

margin-bottom: 100%;

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

Spójrz na ten przykład .

height : <percent>będzie działać tylko wtedy, gdy wszystkie najwyższe węzły mają wszystkie węzły nadrzędne o określonej wysokości i stałej wysokości w pikselach, ems itp. W ten sposób wysokość spadnie kaskadowo do twojego elementu.

Możesz określić 100% do HTML i elementów treści, jak podano wcześniej @Travis, aby wysokość strony spadała kaskadowo do twoich węzłów.

Po długich poszukiwaniach i próbach nic nie rozwiązało mojego problemu

style = "height:100%;"

na div dzieci

i dla rodziców zastosuj to

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

również używam bootstrap i to nie uszkodziło responsywnego dla mnie.

Na podstawie metody opisanej w tym artykule stworzyłem .Mniejsze rozwiązanie dynamiczne:

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>

Mniej:

/* 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;
            }
        }
    }
}

Dodaj display: griddo rodzica

Wiem, że minęło dużo czasu, odkąd pytanie zostało zadane, ale znalazłem łatwe rozwiązanie i pomyślałem, że ktoś może go użyć (przepraszam za słaby angielski). Oto jest:

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>

Prosty przykład. Pamiętaj, że możesz zmienić się w responsywność.

Moje rozwiązanie:

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

Jest trochę sprzeczności w tytule pytania i treści. Tytuł mówi o rodzicielskiej div, ale pytanie brzmi, jakbyś chciał, aby dwie divy rodzeństwa (nawigacja i treść) były tej samej wysokości.

Czy (a) chcesz, aby nawigacja i treść były w 100% wysokości głównej, czy (b) chcesz, aby nawigacja i treść były tej samej wysokości?

Zakładam (b) ... jeśli tak jest, nie sądzę, że będziesz w stanie to zrobić, biorąc pod uwagę obecną strukturę strony (przynajmniej bez czystego CSS i bez skryptów). Prawdopodobnie będziesz musiał zrobić coś takiego:

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

i ustaw div treści tak, aby miał lewy margines niezależnie od szerokości panelu nawigacji. W ten sposób zawartość zawartości znajduje się po prawej stronie nawigacji i możesz ustawić div nawigacji na 100% wysokości zawartości.

EDYCJA: Robię to całkowicie w mojej głowie, ale prawdopodobnie musiałbyś również ustawić lewy margines div nawigacji na wartość ujemną lub ustawić absolutną lewą na 0, aby przesunąć go z powrotem w lewo. Problem w tym, że istnieje wiele sposobów, aby to zrobić, ale nie wszystkie będą kompatybilne ze wszystkimi przeglądarkami.

[Nawiązując do kodu Dmity's Less w innej odpowiedzi] Zgaduję, że jest to jakiś „pseudo-kod”?

Z tego, co rozumiem, spróbuj użyć techniki faux-kolumny, która powinna załatwić sprawę.

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

Mam nadzieję że to pomoże :)

Ta sztuczka działa: Dodanie ostatniego elementu w sekcji HTML ze stylem clear: oba;

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

Wszystko przed tym będzie wliczone w wysokość.

dawanie position: absolute;dziecku działało w moim przypadku

Korzystasz z CSS Flexbox

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

Ta odpowiedź nie jest już idealna, ponieważ CSS Flexbox i grid zostały zaimplementowane w CSS. Jednak nadal jest to skuteczne rozwiązanie

Na mniejszym ekranie prawdopodobnie chciałbyś zachować automatyczną wysokość, ponieważ col1, col2 i col3 są ułożone jeden na drugim.

Jednak po punkcie przerwania zapytania o media chciałbyś, aby cols pojawiały się obok siebie z jednakową wysokością dla wszystkich kolumn.

1125 px to tylko przykład punktu przerwania szerokości okna, po którym chcesz ustawić wszystkie kolumny na tę samą wysokość.

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

W razie potrzeby możesz oczywiście ustawić więcej punktów przerwania.

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

Miałem ten sam problem, działał w oparciu o odpowiedź Hakama Fostoka, stworzyłem mały przykład, w niektórych przypadkach może działać bez konieczności dodawania display: flex;i flex-direction: column;na kontenerze nadrzędnym

.row {
    margin-top: 20px;
}

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

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

JSFiddle

Jak pokazano wcześniej, Flexbox jest najłatwiejszy. na przykład.

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

spowoduje to wyrównanie wszystkich elementów potomnych do środka w elemencie macierzystym.

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

Od:

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

stwierdza bootstrap, ale nie potrzebujesz bootstrap, aby z niego korzystać. Odpowiedź na to stare pytanie, ponieważ działało to dla mnie i wydaje się dość łatwe do wdrożenia.

To była ta sama odpowiedź, której udzieliłem na to pytanie

Oto demo starej mody oparte na position: absolutekontenerze zawartości i position: relativekontenerze nadrzędnym.

Jeśli chodzi o nowoczesny sposób, aby to zrobić - pudełka Flex są najlepsze.

Najłatwiej to zrobić po prostu sfałszować. List Apart omawiał to obszernie na przestrzeni lat, podobnie jak w tym artykule Dan Cederholm z 2004 roku .

Oto jak zwykle to robię:

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

Możesz łatwo dodać nagłówek do tego projektu, zawijając #container w inny div, osadzając div nagłówka jako rodzeństwo # kontenera i przenosząc style marginesów i szerokości do kontenera nadrzędnego. Ponadto CSS powinien zostać przeniesiony do osobnego pliku, a nie przechowywany w linii itd. Itd. Na koniec klasa clearfix znajduje się na pozycji .