Procentowa wysokość HTML 5/CSS

115

Próbuję ustawić wartość <div> na określoną wysokość procentową w CSS, ale pozostanie ona na tym samym poziomie co zawartość w środku. Kiedy jednak usuwam HTML 5 <!DOCTYTPE html>, to działa on, <div> zajmując całą stronę zgodnie z potrzebami. Chcę, aby strona została zatwierdzona, więc co powinienem zrobić?Procentowa wysokość HTML 5/CSS

mam to CSS na <div>, który posiada identyfikator page:

#page { 
    padding: 10px; 
    background-color: white; 
    height: 90% !important; 
}

Źródło

2009-10-25 D. Strout

Oto proste i jasne wyjaśnienie CSS 'własności height' z wartości procentowych: http://stackoverflow.com/a/31728799/3597276 –

rozwiązuje problem DOCTYPE: http://stackoverflow.com/ a/32215263/3597276 –

295

Próbuję ustawić div do pewnej wysokości procentowego w CSS

procent tego, co?

Aby ustawić wysokość procentową, jej element nadrzędny (*) musi mieć wyraźną wysokość. Jest to dość oczywiste, ponieważ jeśli zostawisz wzrost jako auto, blok zajmie wysokość jego zawartości ... ale jeśli sama treść ma wysokość wyrażoną w procentach rodzica, zrobiłeś sobie Mały Catch 22. Przeglądarka rezygnuje i po prostu używa wysokości treści.

Zatem element nadrzędny elementu div musi mieć jawną właściwość height. Chociaż ta wysokość może być również procentem, jeśli chcesz, to po prostu przesuwa problem do następnego poziomu.

Jeśli chcesz, aby wysokość div procent wysokości rzutni, każdy przodek div, w tym <html> i <body>, mieć height: 100%, więc nie jest to sieć wyraźnych wysokościach procentowe w dół do div.

(*. Lub, jeśli div jest ustawiony, do „blok zawierający”, który jest najbliższy przodek się również znajdować)

Alternatywnie, wszystkie nowoczesne przeglądarki IE> = 9 wsparcia jednostek nowy CSS w stosunku do wysokości rzutni (vh) i szerokości okna (vw):

div { 
    height:100vh; 
}

Zobacz tutaj more info.

Źródło

2009-10-25 21:17:03 bobince

Chociaż nie działa dla orientacji portretowej http://stackoverflow.com/questions/23198237/percentage-of-height-not-working-for-portret-screen-orientation – Dchris

Proszę zobaczyć odpowiedź Briana Campbella poniżej Wierzę, że jest prawidłowe rozwiązanie. Ta odpowiedź wydaje się być obejściem i nie rozwiązuje problemu. –

Musisz ustawić wysokość na <html> i <body> elementów jak dobrze; w przeciwnym razie będą one wystarczająco duże, aby pasowały do treści. For example:

<!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>

Źródło

2009-10-25 21:15:03

¬_---- Zajęło mi 20 minut, aby dowiedzieć się, że muszę ustawić wysokość dokumentu na 100%. Czytam to trochę za późno, ale wciąż jest bardzo genialnie. * westchnienie * – omninonsense

To powinno być przegłosowane jako odpowiedź, ponieważ daje rozwiązanie wielu przybywających tu osób zastanawiających się, co można zrobić, większość z nich ogląda pierwszą odpowiedź i uważa, że nie jest to możliwe i odchodzi od myślenia o tym, czy istnieje jakakolwiek inna metoda bez czytania tego –

Zgadzam się, że jest to poprawna odpowiedź, wysokość nie działa, ponieważ trzeba ustawić element macierzysty, który jest treścią i html. Ta odpowiedź powinna być zaakceptowaną odpowiedzią. –

Odpowiedź bobince będzie informować, w których przypadkach "wysokość: XX%;" będzie lub nie będzie działać.

Jeśli chcesz utworzyć element o ustalonej proporcji (wysokość:% jego własnej szerokości), najlepszym sposobem na to jest efektywne ustawienie wysokości za pomocą padding-bottom. Przykład 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 zostanie wykonany z wyściółki, a zawartość zostanie rozwinięta, aby wypełnić pojemnik. Długi artykuł z 2009 roku na ten temat: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Źródło

2013-06-17 22:46:05

niesamowite dzięki! – zaw

Możesz użyć 100vw/100vh. CSS3 udostępnia nam jednostki rzutni.100vw oznacza 100% szerokości rzutni. 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>

Źródło

2016-10-26 06:58:16

Procentowa wysokość HTML 5/CSS

Odpowiedz

Powiązane problemy