Wysokość procentowa HTML 5 / CSS

176

Próbuję ustawić a <div>na pewien procent wysokości w CSS, ale po prostu pozostaje taki sam rozmiar jak zawartość w nim. Kiedy jednak usuwam HTML 5 <!DOCTYTPE html>, działa, <div>zajmując całą stronę zgodnie z życzeniem. Chcę, aby strona została zweryfikowana, więc co mam zrobić?

Mam ten CSS na <div>, który ma identyfikator page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
html css height D. Strout
źródło
3
Oto proste i jasne wyjaśnienie CSS heightnieruchomości o wartości procentowych: stackoverflow.com/a/31728799/3597276
Michael Benjamin
rozwiązuje problem DOCTYPE: stackoverflow.com/a/32215263/3597276
Michael Benjamin

Odpowiedzi:

371

Próbuję ustawić div na określoną procentową wysokość w CSS

Procent czego?

Aby ustawić procentową wysokość, jego element nadrzędny (*) musi mieć określoną wysokość. Jest to dość oczywiste, ponieważ jeśli zostawisz wysokość as auto, blok przyjmie wysokość swojej zawartości ... ale jeśli sama treść ma wysokość wyrażoną w procentach rodzica, to trochę się stworzyłeś Catch 22. Przeglądarka poddaje się i po prostu używa wysokości zawartości.

Zatem element nadrzędny elementu div musi mieć wyraźną heightwłaściwość. Chociaż ta wysokość może być również procentowa, jeśli chcesz, to po prostu przenosi problem na następny poziom.

Jeśli chcesz, aby wysokość div była procentem wysokości widocznego obszaru, każdy przodek elementu div, w tym <html>i <body>, musi mieć height: 100%, więc istnieje łańcuch wyraźnych procentowych wysokości do elementu div.

(*: lub, jeśli element div jest umieszczony, „zawierający blok”, który jest najbliższym przodkiem, który ma również zostać umieszczony).

Alternatywnie, wszystkie nowoczesne przeglądarki i IE> = 9 obsługują nowe jednostki CSS w odniesieniu do wysokości ( vh) i szerokości ( vw):

div {
    height:100vh; 
}

Więcej informacji znajdziesz tutaj .

bobince
źródło
Chociaż nie działa w orientacji pionowej, stackoverflow.com/questions/23198237/ ...
Dchris
1
Zobacz odpowiedź Briana Campbella poniżej. Uważam, że jest to właściwe rozwiązanie. Ta odpowiedź wydaje się być obejściem i nie rozwiązuje rzeczywistego problemu.
MG Developer
69

Trzeba ustawić wysokość nad <html>i <body>elementów, jak również; w przeciwnym razie będą wystarczająco duże, aby zmieścić się w treści. Na przykład :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
Rozwiń fragment

Brian Campbell
źródło
6
¬_¬ Zajęło mi 20 minut, zanim zorientowałem się, że ustawiłem również wysokość dokumentu na 100%. Przeczytałem to trochę za późno, ale i tak jest bardzo genialne. westchnienie
omninonsense
To powinno zostać przegłosowane jako odpowiedź, ponieważ daje rozwiązanie dla wielu ludzi, którzy tu przychodzą, zastanawiając się, co można zrobić najczęściej, obejrzyj pierwszą odpowiedź i pomyśl, że nie jest to możliwe, i odłóż się, myśląc, czy istnieje jakakolwiek inna metoda bez czytania tego
codefreaK
Zgadzam się, że to poprawna odpowiedź, wysokość nie działa, ponieważ element nadrzędny, którym jest body i html, musi być ustawiony. Ta odpowiedź powinna być akceptowaną odpowiedzią.
MG Developer
To nie jest prawidłowa odpowiedź - jeśli zawartość jest większa niż zmieści się na wysokości ekranu, reszta treści i tak nie jest już widoczna, dlatego wysokość NIE została ustawiona na 100% okna przeglądarki, ale ponownie na 100% treści. Może to nie logiczne, ale tak właśnie dzieje się w dwóch głównych przeglądarkach, Firefox i Chrome - po prostu wypróbuj. Zatem przyjęta odpowiedź jest jedyną poprawną.
nepdev
15

Odpowiedź bobince'a poinformuje Cię, w jakich przypadkach „wysokość: XX%;” będzie działać lub nie.

Jeśli chcesz stworzyć element o ustalonym stosunku (wysokość:% własnej szerokości), najlepszym sposobem na to jest efektywne ustawienie wysokości za pomocą padding-bottom. Przykład dla kwadratu:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Kwadratowy pojemnik będzie po prostu wypełniony, a zawartość rozszerzy się, aby wypełnić pojemnik. Długi artykuł z 2009 roku na ten temat: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Olex Ponomarenko
źródło
to działa świetnie. Działa również szybko w przeglądarce podczas zmiany rozmiaru strony zawierającej ponad 100 elementów. dzięki!
dean grande
5

Możesz użyć 100vw / 100vh. CSS3 daje nam jednostki zależne od widocznego obszaru. 100vw oznacza 100% szerokości widocznego obszaru. 100vh; 100% wysokości.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>
Ahmad Aghazadeh
źródło
4

Cześć! Aby użyć wartości procentowej (%), musisz zdefiniować% jej elementu nadrzędnego. Jeśli użyjesz body {height: 100%}, to nie zadziała, ponieważ jego rodzic nie ma procentowego wzrostu. W takim przypadku, aby pracować z tą wysokością ciała , musisz dodać to w html {wysokość: 100%}

W innym przypadku, aby pozbyć się tego definiującego procentu rodzica, możesz użyć

body {height: 100vh}

vh oznacza wysokość rzutni

Myślę, że to pomaga

Md. A. Barik
źródło
2

Czasami możesz chcieć warunkowo ustawić wysokość elementu div, na przykład gdy cała zawartość jest mniejsza niż wysokość ekranu. Ustawienie wszystkich elementów nadrzędnych na 100% spowoduje odcięcie treści, gdy będzie ona większa niż rozmiar ekranu.

Tak więc sposobem na obejście tego jest ustawienie minimalnej wysokości:

Kontynuuj, aby elementy nadrzędne automatycznie dostosowywały wysokość. Następnie w głównym elemencie div odejmij rozmiar w pikselach elementu div nagłówka i stopki od 100vh (jednostek widocznych). W css coś takiego:

min-height: calc (100vh - 246px);

100vh to pełna długość ekranu bez otaczających elementów div. Po ustawieniu minimalnej wysokości, a nie wysokości, zawartość dłuższa niż ekran będzie nadal płynąć, zamiast zostać odcięta.

Jahmic
źródło