wysokość w procentach Css nie działa

101

mam następujący prosty kod:wysokość w procentach Css nie działa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 

 
<head> 
 
    <title>Live Feed</title> 
 

 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 

 
    <style> 
 
    body { 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;"> 
 
    I should be tall 
 
    </div> 
 
</body> 
 

 
</html>

Ale div nie zostanie wyświetlona z wysokości ponad 100%. Czemu?

Źródło

2011-11-24 user1009698

dla elementu mieć względny wysokość musi mieć element nadrzędny o określonym rozmiarze, ponieważ jego własny rozmiar jest względny * do *. Jeśli dodasz 'height: 500px;' (lub cokolwiek) do elementu 'body', powinno to działać. –

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

112

Musisz ustawić 100% wzrost wszystkich elementów rodzica, w tym przypadku ciała i html. Ten fiddle pokazuje, że działa.

html, body { height: 100%; width: 100%; margin: 0; } 
 
div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

Źródło

2011-11-24 22:00:21

+10

Skrzypek działał, ponieważ ustawia zarówno html, jak i ciało na wysokość 100%. –

a co z szerokością? nie musimy określać szerokości rodzica? @EdBayiates –

@Adamnick, pytanie dotyczyło tylko wysokości. Szerokość nie wpływa na wysokość. –

height: 100% prace jeśli dać stały rozmiar do elementu nadrzędnego.

Źródło

2011-11-24 22:01:54

dodawania height: 100% do ciała

body{height:100%}

Źródło

2013-04-24 14:06:58

To nie działało, chyba że dałem również 100% rozmiaru do HTMLa, jak pokazuje @ Jan. –

Można to osiągnąć za pomocą pozycjonowania.

Spróbuj

position: absolute;

aby uzyskać wysokość 100%.

Źródło

2013-09-15 17:46:51 Muthu

Musisz ustawić 100% wysokość na elemencie nadrzędnym.

Źródło

2014-05-15 09:55:32 rahul

div { 
    height:100vh; 
}

działa we wszystkich nowoczesnych przeglądarkach IE> = 9, patrz tutaj more info.

Źródło

2014-06-11 13:36:50 mb21

To jest to, czego potrzebujesz w CSS:

html, body 
{ 
height: 100%; 
width: 100%; 
margin: 0; 
}

Źródło

2014-07-29 10:26:23 SiggeLund

korzeń rodzic musiał być w pikselach jeśli chcesz swobodnie pracować z procentów,

<body style="margin: 0px; width: 1886px; height: 939px;"> 
<div id="containerA" class="containerA" style="height:65%;width:100%;"> 
    <div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;"> 
     <div style="height: 100%;width: 50%;float: left;"></div> 
     <div style="height: 100%;width: 28%;float:left"> 
      <img src="img/justimage.png" style="max-width:100%;max-height:100%;"> 
     </div> 
     <div style="height: 100%;width: 22%;float: left;"></div> 
    </div> 
</div> 
</body>

Źródło

2015-06-19 21:46:57 Proxytype

wysokość w procentach Css nie działa

Odpowiedz

Powiązane problemy