2013-05-20 22 views
10

Próbuję użyć właściwości height, używając procentów, ale to nie działa. Chcę użyć procentu, aby wyglądał dobrze w każdej rozdzielczości.Procent wysokości nie działa w CSS

<div id="bloque_1" style="height: 80%;background: red"> 
</div> 

Jak mogę to sprawić?

+3

Wysokość procenty są nieco zaniedbany, ale jeśli nalegać, wykorzystujące procenty zajmie tylko procentu wysokości pojemnika. Spróbuj dodać {min-height: 100%; } do znacznika {body}. –

+0

minimalna czynność do wykonania = (użyłem zamiast tego, wysokość: 100% – Flezcano

+0

Teraz będziesz mieć problem, gdy wzrost zawartości musi się powiększyć o 100%. –

Odpowiedz

32

Kiedy używasz % dla szerokości lub wysokości, pierwsze pytanie, które powinieneś zadać, to to, co 80%? Więc trzeba także stosować wysokość do elementu nadrzędnego, więc zakładając, że ten element jest twój wewnątrz znacznika body, trzeba to wykorzystać w swojej CSS

html, body { 
    height: 100%; 
} 

więc teraz swoją elementem div będzie 80% z 100%

Demo

Side Uwaga: również, gdy masz do czynienia z absolute elementów pozycjonowanych, można natknąć się na scenariuszu, gdzie div nie przekroczy bieżącą wysokość rzutni, więc w tym przypadku trzeba mają min-height

+0

Przez jakiś czas borykałem się z podobnym problemem, Ustawiłem ciało na 100%, ale nie html, dzięki! –

5

Wszystko na zewnątrz od bloque_1 będzie również wymagało wzrostu, lub otrzymasz 80% z 0. Może być również konieczne zastosowanie wysokości 100% do body.

Oto jsfiddle, który pokazuje go w akcji.

2

Zastosuj 100% na wysokość elementu nadrzędnego

HTML Code

<html> 
<body> 
<div id="bloque_1" style="height:80%;background:red;width:100%;"> 
</div> 
</body> 
</html> 

CSS cało pojazdowych

html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c } 

robocza Fiddle - http://jsfiddle.net/SEafD/1/

0

Demo

html,body{ 
    height:100% 
} 
#bloque_1{ 
    background:red; 
    height:80%; 
}