CSS-Expand float Child div height to parent ' s height
Mam strukturę strony jako:
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
Teraz, child-left
DIV będzie miał więcej treści, więc wysokość parent
div zwiększa się jak na dziecko DIV.
13 answers
Dla elementu parent
dodaj następujące właściwości:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
Następnie dla .child-right
Te:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Więcej szczegółowych wyników z przykładami CSS znajdziesz tutaj i więcej informacji o kolumnach o równej wysokości tutaj.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-31 14:36:29
Powszechne rozwiązanie tego problemu wykorzystuje absolutne pozycjonowanie lub przycięte pływaki, ale są one trudne, ponieważ wymagają obszernego strojenia, jeśli kolumny zmieniają Rozmiar cyfry+, i że musisz upewnić się, że Twoja" główna " kolumna jest zawsze najdłuższa. Zamiast tego sugerowałbym użycie jednego z trzech bardziej solidnych rozwiązań:]}
-
display: flex
: zdecydowanie najprostsze i najlepsze rozwiązanie i bardzo elastyczne-ale nieobsługiwane przez IE9 i starsze. -
table
lubdisplay: table
: bardzo proste, bardzo kompatybilny( prawie każda przeglądarka kiedykolwiek), dość elastyczny. -
display: inline-block; width:50%
z ujemnym marginesem hack: dość proste, ale granice od dołu kolumny są trochę trudne.
1. display:flex
Jest to naprawdę proste i łatwo jest dostosować się do bardziej złożonych lub bardziej szczegółowych układów - ale flexbox jest obsługiwany tylko przez IE10 lub nowszy (oprócz innych nowoczesnych przeglądarek).
przykład: http://output.jsbin.com/hetunujuma/1
odpowiedni html:
<div class="parent"><div>column 1</div><div>column 2</div></div>
odpowiedni css:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox obsługuje dużo więcej opcji, ale aby po prostu mieć dowolną liczbę kolumn wystarczy powyższe!
2.<table>
lub display: table
Prostym i niezwykle kompatybilnym sposobem na to jest użycie table
- polecam wypróbować to najpierw, jeśli potrzebujesz wsparcia old-IE . Masz do czynienia z kolumny; div + pływaki po prostu nie są najlepszym sposobem, aby to zrobić (nie wspominając o tym, że wiele poziomów zagnieżdżonych div po prostu włamać się wokół ograniczeń css jest prawie bardziej "semantyczne"niż po prostu za pomocą prostej tabeli). Jeśli nie chcesz używać elementu table
, rozważ css display: table
(nieobsługiwane przez IE7 i starsze).
przykład: http://jsfiddle.net/emn13/7FFp3/
odpowiedni html: (ale rozważ użycie zwykłego <table>
zamiast)
<div class="parent"><div>column 1</div><div>column 2</div></div>
odpowiedni css:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
To podejście jest znacznie bardziej wytrzymałe niż stosowanie overflow:hidden
z pływakami. Możesz dodać praktycznie dowolną liczbę kolumn; możesz je mieć auto-scale, jeśli chcesz; i zachowujesz zgodność z starożytnymi przeglądarkami. W przeciwieństwie do wymaganego rozwiązania float, nie musisz wcześniej wiedzieć , która kolumna jest najdłuższa; wysokość skaluje się dobrze.
KISS: nie używaj float hacki chyba, że trzeba. Jeśli IE7 jest problemem, nadal wybrałbym zwykłą tabelę z kolumnami semantycznymi zamiast trudnego do utrzymania, mniej elastycznego rozwiązania trick-CSS każdego dnia.
Nawiasem mówiąc, jeśli potrzebujesz, aby twój układ był responsywny (np. brak kolumn w małych telefonach komórkowych), możesz użyć zapytania @media
, aby powrócić do zwykłego układu bloków dla małych szerokości ekranu - działa to niezależnie od tego, czy używasz <table>
, Czy dowolnego innego display: table
elementu.
3. display:inline block
z ujemnym marginesem hack.
Inną alternatywą jest użycie display:inline block
.
przykład: http://jsbin.com/ovuqes/2/edit
odpowiedni html: (brak spacji pomiędzy znacznikami div
jest znaczący!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
odpowiedni css:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Jest to nieco skomplikowane, a ujemny margines oznacza, że "prawdziwe" dno kolumn jest zasłonięte. To z kolei oznacza, że nie możesz niczego pozycjonować w stosunku do dołu tych kolumn, bo to jest odcięte przez overflow: hidden
. Zauważ, że oprócz bloków w linii, możesz osiągnąć podobny efekt za pomocą pływaków.
TL; DR: użyj flexbox jeśli możesz zignorować IE9 lub starsze; w przeciwnym razie spróbuj użyć tabeli (css). Jeśli żadna z tych opcji nie działa dla Ciebie, istnieją hacki ujemnych marginesów, ale mogą one powodować dziwne problemy z wyświetlaniem, które łatwo przegapić podczas tworzenia. świadomi.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-28 19:58:53
Dla rodzica:
display: flex;
Dla Dzieci:
align-items: stretch;
Powinieneś dodać kilka przedrostków, sprawdź caniuse.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-12 16:39:03
Znalazłem wiele odpowiedzi, ale chyba najlepszym rozwiązaniem dla mnie jest
.parent {
overflow: hidden;
}
.parent .floatLeft {
# your other styles
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Możesz sprawdzić inne rozwiązania tutaj http://css-tricks.com/fluid-width-equal-height-columns/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-19 08:26:41
Proszę ustawić parent div na overflow: hidden
następnie w divach dziecięcych można ustawić dużą ilość dla padding-bottom. na przykładpadding-bottom: 5000px
then margin-bottom: -5000px
i wtedy wszystkie dziecięce div będą wysokością rodzica.
Oczywiście to nie zadziała, jeśli próbujesz umieścić zawartość w nadrzędnym div (poza innymi divami, które są)
.parent{
border: 1px solid black;
overflow: hidden;
height: auto;
}
.child{
float: left;
padding-bottom: 1500px;
margin-bottom: -1500px;
}
.child1{
background: red;
padding-right: 10px;
}
.child2{
background: green;
padding-left: 10px;
}
<div class="parent">
<div class="child1 child">
One line text in child1
</div>
<div class="child2 child">
Three line text in child2<br />
Three line text in child2<br />
Three line text in child2
</div>
</div>
Przykład: http://jsfiddle.net/Tareqdhk/DAFEC/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-03 02:42:21
Czy rodzic ma wzrost? Jeśli ustawisz wysokość rodziców w ten sposób.
div.parent { height: 300px };
Wtedy możesz sprawić, że dziecko rozciągnie się na pełną wysokość w ten sposób.
div.child-right { height: 100% };
EDIT
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-26 12:47:53
Wyświetlanie tabeli CSS jest idealne do tego:
.parent {
display: table;
width: 100%;
}
.parent > div {
display: table-cell;
}
.child-left {
background: powderblue;
}
.child-right {
background: papayawhip;
}
<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>
Oryginalna odpowiedź (zakładała, że każda kolumna może być wyższa):
starasz się, aby wysokość rodzica zależy od wzrostu dzieci i wysokość dzieci zależy od wzrostu rodzica. Nie obliczy. CSS Faux columns to najlepsze rozwiązanie. Jest na to więcej niż jeden sposób. Wolałbym nie używać JavaScript.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-04 04:15:03
Ostatnio zrobiłem to na mojej stronie przy użyciu jQuery. Kod oblicza wysokość najwyższego div I ustawia Pozostałe div na tę samą wysokość. Oto technika:
Http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
Nie wierzę, że height:100%
zadziała, więc jeśli nie znasz div-ów, to nie sądzę, aby było czyste rozwiązanie CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-26 12:41:26
Użyłem tego do sekcji komentarzy:
.parent {
display: flex;
float: left;
border-top:2px solid black;
width:635px;
margin:10px 0px 0px 0px;
padding:0px 20px 0px 20px;
background-color: rgba(255,255,255,0.5);
}
.child-left {
align-items: stretch;
float: left;
width:135px;
padding:10px 10px 10px 0px;
height:inherit;
border-right:2px solid black;
}
.child-right {
align-items: stretch;
float: left;
width:468px;
padding:10px;
}
<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>
Możesz unosić dziecko-prawo w prawo, ale w tym przypadku obliczyłem szerokość każdego div dokładnie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-03 03:33:35
Jeśli znasz bootstrap, możesz to zrobić łatwo, używając właściwości 'flex'.Wszystko, co musisz zrobić, to przekazać poniżej właściwości css do rodzica div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
Gdzie .homepageSection
jest mój rodzic div.
Teraz dodaj child div w html jako
<div class="abc col-md-6">
<div class="abc col-md-6">
Gdzie abc jest moim dzieckiem div.Możesz sprawdzić równość wysokości w obu child div niezależnie od obramowania, podając obramowanie do child div
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-12 16:40:01
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
Użyłem stylu inline, aby dać pomysł.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-25 18:49:10
Widzę, że przyjęta odpowiedź używa position: absolute;
zamiast float: left
. Jeśli chcesz użyć float: left
o następującej strukturze,
<div class="parent">
<div class="child-left floatLeft"></div>
<div class="child-right floatLeft"></div>
</div>
Daj rodzicowi position: auto;
tak, aby zawierał wzrost dzieci.
.parent {
position: auto;
}
.floatLeft {
float: left
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-10 15:35:53
Dowiedziałem się o tym na rozmowie kwalifikacyjnej. Pierwotne pytanie brzmi: jak upewnić się, że wysokość każdego górnego komponentu w trzech kolumnach ma tę samą wysokość, która pokazuje całą dostępną zawartość. Zasadniczo Utwórz niewidoczny komponent potomny, który renderuje maksymalną możliwą wysokość.
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-11 05:04:23