Jak zrobić pływającą div 100% wysokości swojego rodzica?

Oto HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

A oto CSS:

#inner {
  float: left;
  height: 100%;
}

Po sprawdzeniu za pomocą narzędzi dla programistów Chrome wewnętrzna div uzyskuje wysokość 0 pikseli.

Jak mogę zmusić go do 100% wysokości div rodzica?

Aby #outerwysokość opierała się na jej treści i na tej #innerpodstawie opierała wysokość, należy bezwzględnie ustawić oba elementy.

Więcej szczegółów można znaleźć w specyfikacji właściwości css height , ale w zasadzie #innermusi ona ignorować #outerwysokość, jeśli #outerwysokość jest auto, chyba że #outer jest ustawiona absolutnie. Wówczas #innerwysokość będzie wynosić 0, chyba że #inner sam jest umieszczony całkowicie.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Jednak ... pozycjonując #innerabsolutnie, floatustawienie zostanie zignorowane, więc musisz #innerjawnie wybrać szerokość dla i dodać dopełnienie, #outeraby sfałszować zawijanie tekstu, które podejrzewam, że chcesz. Na przykład poniżej wypełnienie #outerma szerokość #inner+3. Dogodnie (ponieważ celem było uzyskanie #innerwysokości do 100%) nie ma potrzeby zawijania tekstu pod spodem #inner, więc będzie wyglądał tak, jakby #innerbył pływający.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

Usunąłem moją poprzednią odpowiedź, ponieważ była ona oparta na zbyt wielu błędnych założeniach dotyczących twojego celu.

Dla rodzica:

display: flex;

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

Edycja: Jedyną wadą jest IE jak zwykle, IE9 nie obsługuje flex. http://caniuse.com/flexbox

Edycja 2: Jak zauważył @toddsby, wyrównywanie elementów jest dla elementu nadrzędnego, a jego domyślną wartością jest w rzeczywistości rozciągnięcie . Jeśli chcesz mieć inną wartość dla dziecka, istnieje właściwość align-self.

Edycja 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

W rzeczywistości, dopóki element macierzysty jest ustawiony, możesz ustawić wzrost dziecka na 100%. Mianowicie, w przypadku, gdy nie chcesz, aby rodzic był absolutnie ustawiony. Pozwól, że wyjaśnię dalej:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Tak długo, jak nie potrzebujesz obsługiwać wersji Internet Explorera wcześniejszych niż IE8, możesz tego użyć display: table-cell:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

Zmusi to każdy element z .innerklasą do zajmowania pełnej wysokości elementu nadrzędnego.

Zrobiłem przykład rozwiązującego problem.

Musisz zrobić owijkę, unieść ją na wodzie, a następnie ustawić absolutnie div i dać mu 100% wysokości.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Wyjaśnienie: .right div jest absolutnie ustawiony. Oznacza to, że jego szerokość i wysokość oraz górne i lewe pozycje zostaną obliczone na podstawie pierwszego elementu div absolutnie lub względnie pozycjonowanego TYLKO, jeśli właściwości width lub height są wyraźnie zadeklarowane w CSS; jeśli nie są one jednoznacznie zadeklarowane, właściwości te zostaną obliczone na podstawie kontenera nadrzędnego (.right-wrapper).

Zatem 100% wysokości DIV zostanie obliczona na podstawie wysokości końcowej kontenera, a pozycja końcowa pozycji prawej zostanie obliczona na podstawie kontenera rodzica.

Oto prostszy sposób na osiągnięcie tego:

1. Ustaw wyświetlanie kontenera trzech elementów (#outer): tabela
2. I ustaw same elementy (#inner) display: table-cell
3. Usuń element pływający.
4. Sukces.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Dzięki @Itay in Floated div, 100% wysokości

Jeśli jesteś przygotowany na użycie małej jQuery, odpowiedź jest prosta!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Działa to dobrze w przypadku przestawiania pojedynczego elementu na bok ze 100% wysokością jego elementu nadrzędnego, podczas gdy inne elementy pływające, które normalnie byłyby owijane, są trzymane z jednej strony.

Mam nadzieję, że pomoże to innym fanom jQuery.

To jest przykładowy kod dla systemu siatki o równej wysokości.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Powyżej znajduje się CSS dla zewnętrznego div

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Powyżej jest wewnętrzny div

Mam nadzieję, że ci to pomoże

To mi pomogło.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Zmień w prawo: i w lewo: aby ustawić preferowaną # szerokość wewnętrzną.

Podobny przypadek, gdy potrzebujesz kilku elementów potomnych o tej samej wysokości, można rozwiązać za pomocą Flexbox:

https://css-tricks.com/using-flexbox/

Wszystkie elementy ustawione display: flex;dla elementów nadrzędnych i flex: 1;podrzędnych będą miały tę samą wysokość.

próbować

#outer{overflow: auto;}

pokaż więcej opcji w: Jak uchronić rodziców elementów pływających przed zapadnięciem się?