1. Dom
  2. Pytanie i odpowiedź
  3. Wymusić zagnieżdżone elementy div, aby uzyskać min-wysokość 100%?

Wymusić zagnieżdżone elementy div, aby uzyskać min-wysokość 100%?

2012-08-11 13 views
12

Wiem, że min-height: 100% będzie działał tylko w celu uzyskania co najmniej 100% wysokości elementu nadrzędnego, jeśli element nadrzędny ma jakąś wartość liczbową dla wysokości, ale co jeśli mam kilka zagnieżdżonych elementów div i chcę, aby wszystkie miały min-wysokość 100%? Próbowałem min-height:inherit, ale to też nie działało? Wiem, że prawdopodobnie rozwiążę ten problem z JavaScriptem, po prostu sprawdzając wartość wysokości przeglądarki przy ładowaniu dokumentu, a następnie przypisując to do właściwości min-height moich zagnieżdżonych div, ale chciałbym się dowiedzieć, czy byłoby to możliwe, aby rozwiązać ten problem. tylko z CSS?Wymusić zagnieżdżone elementy div, aby uzyskać min-wysokość 100%?

Edit: Należy również wspomnieć, że muszę mój zewnętrzny najbardziej div i moje zagnieżdżonych div wszystko mieć min-height 100% tak, że zajmują co najmniej wysokość przeglądarki, ale rozszerzyć w razie potrzeby .

Źródło

2012-08-11 hesson

Odpowiedz

19

min-height: inherit; powinno działać: http://jsfiddle.net/ugxbs/

EDIT

jak dla wartości procentowe i oczekiwanego zachowania nie jest logika zagnieżdżonej obr./min wysokości. Powinieneś użyć właściwości height dla wszystkich rodziców, a następnie dodaj min-wysokość do wewnętrznej najbardziej DIV.

F.ex:

<html> 
    <body> 
     <div class="outer"> 
      <div class="inner"></div> 
     </div> 
    </body> 
</html>

CSS:

html, body, .outer { height: 100% } 
.inner { min-height: 100%; }

http://jsfiddle.net/4PsdT/

ten sposób mówisz przeglądarkę, aby ustawić wszystkie elementy zewnętrzne (od góry) Do HTML wysokość 100%. Spowoduje to rozciągnięcie tych elementów na wysokość przeglądarki. Następnie dodaj element min-height do najbardziej wewnętrznego elementu zawierającego zawartość.

Ustawienie height nie oznacza, że ​​nadmierna zawartość dzieci wypadnie, chyba że dodasz overflow:hidden;.

Źródło

2012-08-11 18:29:01 David

+0

wiem, że to działa, gdy zewnętrzna najbardziej div ma wartość liczbową min-height, ale nie powiedzie się, gdy zewnętrzna najbardziej div ma procentową min-height (co jest to, czego potrzebuję w mój przypadek). Potrzebuję całego mojego zagnieżdżonego elementu div, aby wznieść co najmniej wysokość okna przeglądarki, więc mój najbardziej zewnętrzny element div powinien mieć minimalną wysokość 100%, chyba że istnieje inny sposób rozwiązania tego problemu. – hesson

+0

@hesson Zobacz moją edycję, aby spróbować wyjaśnić, dlaczego zagnieżdżona min-wysokość nie jest logicznym podejściem do problemu. – David

+0

Idealne, właśnie tego potrzebowałem! – hesson

Powiązane problemy

 Powiązane problemy