Dlaczego wysokość: 100% nie działa, aby rozwinąć div do wysokości ekranu?

295

Chcę, aby karuzela DIV (s7) powiększyła się do wysokości całego ekranu. Nie mam pojęcia, dlaczego to się nie udaje. Aby zobaczyć stronę, możesz przejść tutaj .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

Rozwiń fragment kodu

html css height Earl Larson
źródło

2

Oto proste i jasne wyjaśnienie: stackoverflow.com/a/31728799/3597276

Michael Benjamin

prawdopodobnie najlepsze rozwiązanie dla zagnieżdżonych elementów, które nie powinny rozciągać się na wysokość całego okna stackoverflow.com/questions/7049875/he-100-100-not-working/…

B-GangsteR

409

Aby wartość procentowa działała na wysokości, należy określić wysokość rodzica. Jedynym wyjątkiem jest element główny<html> , który może być wartością procentową. .

Tak więc podałeś wszystkie swoje elementy z wyjątkiem wysokości <html>, więc powinieneś dodać to:

html {
    height: 100%;
}

Twój kod powinien działać poprawnie.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

Rozwiń fragment kodu

Przykład JsFiddle .

Duch Madary
źródło

23

Ok, to może sprawić, że będę wyglądać niesamowicie głupio, ale cokolwiek : Czy chcesz powiedzieć, że <html>to jest prawdziwy element - tak jak <p>lub <img />? Myślałem, że jedynym celem <html>było zdefiniowanie początku i końca dokumentu HTML. Chodzi mi o to, że myślałem, że tam jest, nie w układzie, ale po to, żeby przeglądarka wiedziała, jaki typ dokumentu przegląda? Jestem całkowicie oszołomiona.

jay_t55

29

@Joey: HTML jest rzeczywistym elementem. Możesz stylizować go za pomocą CSS, zaczepiać do niego zdarzenia w JavaScript, dodawać do niego klasy i identyfikatory, i pojawia się w DOM. Przeglądarka przyjmie dokument HTML nawet bez <html>znacznika, a nawet bez elementów <head>lub <body>. Jednak specyfikacje HTML uznają ten <html>tag za obowiązkowy. Krótko mówiąc, tak, jest to pełnoprawny element, jak wszystkie inne elementy HTML.

Madara's Ghost

1

@SecondRikudo: Nie, <html>tag jest opcjonalny zgodnie ze specyfikacjami (np. HTML4 i HTML5). I tak, element i tak jest tworzony.

Robert Siemer

2

hmmm ... dla mnie jedynym sposobem, aby to działało, było ustawienie zarówno htmli bodyjako height: 100%(Oprócz tego, że konkretnie divchcę odziedziczyć 100% wysokości)

James

1

@james Tak, wszyscy rodzice muszą mieć znaną wysokość.

Duch Madary

147

_{Ponieważ nikt o tym nie wspominał ...}

Nowoczesne podejście:

Jako alternatywę dla ustawienia obu wysokości elementu html/ możesz użyć również procentowych długości rzutni:body100%

5.1.2 Długości procentowe rzutni: jednostki „vw”, „vh”, „vmin”, „vmax”

Długości procentowe rzutni są względne do rozmiaru początkowego bloku zawierającego. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, są one odpowiednio skalowane.

W tym przypadku możesz użyć wartości 100vh(która jest wysokością rzutni) - (przykład)

body {
    height: 100vh;
}

Ustawienie a min-heighttakże działa. (przykład)

body {
    min-height: 100vh;
}

Urządzenia te są obsługiwane w większości nowoczesnych przeglądarek - pomoc można znaleźć tutaj .

Josh Crozier
źródło

1

Nie widzę w tym żadnej korzyści. Czy nie tworzy dodatkowej pracy dla przeglądarki, która musi obliczyć wszystko związane z oknem przeglądarki? Rozmiary rzutni wydają się korzystne tylko wtedy, gdy chcesz faktycznie zmienić rozmiar związany z wysokością przeglądarki.

Robert Went

12

@RobertWent Istnieją korzyści. Na przykład height: 100%działa tylko wtedy, gdy element macierzysty ma określoną wysokość. Z pewnością istnieją przypadki, w których element nadrzędny elementu nie ma określonej wysokości, a jednostki procentowe rzutni to rozwiązują. Innymi słowy, gdybyś miał głęboko zagnieżdżony element, mógłbyś po prostu ustawić 100vh, a miałby on wysokość 100%przeglądarki. Możesz nie widzieć żadnych korzyści, ale byłem w wielu przypadkach, gdy były one jedynym rozwiązaniem. Jednostki te mogą nie być tak korzystne dla elementów korzeni, takich jak html/ body, ale mimo to jest to alternatywa

Josh Crozier

2

Ale mówimy o elemencie ciała, a nie o głęboko zagnieżdżonym elemencie. Istnieje tylko jeden możliwy element nadrzędny, element HTML. Właśnie dlatego wspomniałem, że nie widzę korzyści i jest to prawdopodobnie gorsze niż ustawienie 100%. Twój komentarz nie mówi nic, co by mnie rozchmurzyło. To, że coś jest nowego, nie poprawia tego. Jest to jednak alternatywa.

Robert poszedł

4

Problem z tym podejściem polega na tym, że iPhone'y wykluczają pasek adresu i dolną nawigację z wysokości widoku, co oznacza body { height: 100vh }, że będzie miał pasek przewijania przy początkowym ładowaniu strony.

BHOLT

2

Miły. Wypróbowałem inne podejście, umieściłem height: 100% !important" to each parent til html` bez powodzenia, mogłem zobaczyć w domenie, że każdy węzeł drzewa był w rzeczywistości, 100%ale nie byłem w stanie ustawić 100% w pożądanym elemencie, ale styl widoku był łatwy

pmiranda

25

Konieczne będzie również ustawienie 100% wysokości htmlelementu:

html { height:100%; }

shanethehat
źródło

20

Alternatywnie, jeśli użyjesz, position: absoluteto height: 100%będzie działać dobrze.

Steve Tauber
źródło

4

Byłbym świetnym rozwiązaniem, gdybym nie używał Flexboksa do stworzenia mojego układu. : /

Landon Zadzwoń

2

Nie zapomnij ustawić width:100%;i rodzica position:relative;.

Kai Noack,

8

Powinieneś spróbować z elementami nadrzędnymi;

html, body, form, main {
    height: 100%;
}

To wystarczy:

#s7 {
   height: 100%;
}

mrbengi
źródło

5

jeśli chcesz na przykład lewej kolumny (wysokość 100%) i zawartości (wysokość auto), możesz użyć wartości bezwzględnej:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

w html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

YellowMart
źródło

2

To może nie być idealne, ale zawsze możesz to zrobić za pomocą javascript. Lub w moim przypadku jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

oBo
źródło

5

Nigdy nie jest dobrym pomysłem używanie javascript, gdy wystarczy css.

Bosworth99,

1

Po co w ogóle robić coś takiego i komplikować to bardziej niż powinno być? Nie rozumiem niektórych odpowiedzi lol ...

CapturedTree

1

W źródle strony widzę:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Jeśli umieścisz wartość wysokości w znaczniku, użyje tego zamiast wysokości zdefiniowanej w pliku css.

Steven
źródło

To dziwne, ponieważ to widzę w źródle strony: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

Earl Larson

Ok, chociaż nie wiem, skąd masz powyższy kod, wszedłem i zmieniłem <div id = "s7"> na <div id = "s7" style = "height: 100%;"> i zadziałało. Może coś ukrywa przede mną? Tak czy inaczej dziękuję :)

Earl Larson,

1

Jeśli absolutnie umieścisz elementy wewnątrz div, możesz ustawić górną i dolną część wypełnienia na 50%.

Więc coś takiego:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

Keith Brown
źródło

1

Nie rozumiem, jak to może działać, ponieważ 50% jest związane z szerokością, a nie z wysokością elementu zawierającego, czy coś tu brakuje?

DrLightman

0

Oto inne rozwiązanie dla osób, które nie chcą używać html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Rozwiń fragment kodu

TheMisir
źródło

Dlaczego wysokość: 100% nie działa, aby rozwinąć div do wysokości ekranu?

Odpowiedzi:

Nowoczesne podejście: