我沒有得到高度，我給它

嗨，大家好我給了80％的高度的內容，但我沒有得到它，請告訴我犯的錯誤。我以類似的方式早些時候做了網頁，但這次只有我得到錯誤。如果有人幫助我，我會很高興。我沒有得到高度，我給它

body 
 
{ 
 
\t 
 
\t margin:0px; 
 
\t background-color:lightseagreen; 
 
} 
 

 
#wrapper 
 
{ 
 
height:100%; 
 
min-height:100%; 
 
width:100%; 
 
background-color:red; 
 
padding:0px; 
 
margin:0px; 
 

 
} 
 
#header 
 
{ 
 
height:10%; 
 
width:100%; \t 
 
\t 
 
} 
 
#navbar 
 
{ 
 
height:10%; 
 
width:100%; 
 
background-color:black; 
 
color:white; 
 
float:left; 
 
} 
 
#navbar ul li 
 
{ 
 
width:70%; 
 
display:inline; 
 
padding:17px 25px; 
 
} 
 
#navbar ul li a 
 
{ 
 
color:white;  
 
    
 
} 
 
#navbar ul li:hover 
 
{ 
 
background-color:lightgrey; 
 
} 
 
#content 
 
{ 
 
width:100%; 
 
height:80%; 
 
background-color:red; 
 
float:left; 
 
} 
 
.details 
 
{ 
 
width:100%; 
 
height:80%; 
 
float:left; \t 
 
\t 
 
} 
 
#footer 
 
{ 
 
width:100%; 
 
height:10%; 
 
background-color:gray; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<title>student</title> 
 
<link rel="stylesheet" type="text/css" href="ab.css"> 
 
</head> 
 
<body> 
 
<div id="wrapper"><!--start wrapper--> 
 
<div id="header"> 
 
<div id="navbar"><!--start nav--> 
 
<ul> 
 
<li>About us</li> 
 
<li>Contact</li> 
 
<li>Services</li> 
 
<li>Sign</li> 
 
</ul> 
 
</div><!--end nav--> 
 
</div> 
 
<div id="content"><!--start content--> 
 
<div class="details"> 
 

 
here 
 
</div> 
 
</div><!--end content--> 
 
<div id="footer"><!--start footer--> 
 
copyrights to N.sudharsan 
 
</div><!--end footer--> 
 
</div><!--end wrapper--> 
 
</body> 
 
</html>

來源

2016-08-19 sudharsan

百分比不適用於外部div（包裝）的高度。在PX中添加高度 – Nikz

我的代碼將適用於您的兄弟。檢查一下。由於PX工作正常，我也得到了輸出。 –

應用此CSS樣式對你的內容的div：

#content 
{ 
width:100%; 
min-height:450px; 
background-color:red; 
float:left; 
}

這將解決您的問題

來源

2016-08-19 11:45:25

@sudharsan這將工作兄弟。 –

ty其略有變化，但y未佔用百分比，需要像素值 – sudharsan

@sudharsan在此處查看。這裏有一個清楚的解釋。我們必須在px中以％和min-height來指定高度。 https://css-tricks.com/almanac/properties/m/min-height/ –

您需要添加

html{height:100%;} body{min-height:100%}

您的其他代碼應該相同。

來源

2016-08-19 11:46:56

保持不變 – sudharsan

它只是意味着高度是在＃wrapper 你的身高的80％，所以在你的包裝中設置一個大小。

body 
{ 

margin:0px; 
background-color:lightseagreen; 
} 

#wrapper 
{ 

    height:700px; min-height:100%; width:100%; background-color:red; padding:0px; margin:0px; 

} 
#header { height:10%; width:100%;  } 
#navbar { height:10%; width:100%; background-color:black; color:white;  float:left; } 
#navbar ul li { 

     width:70%; 
     display:inline; 
     padding:17px 25px; 
     } 
     #navbar ul li a 
     { 
     color:white;  

     } 
     #navbar ul li:hover 
     { 
     background-color:lightgrey; 
     } 
     #content 
     { 
     margin-top:5%; 
     width:100%; 
     height:80%; 
     background-color:red; 
     float:left; 
     } 
     .details 
     { 
     width:100%; 
     height:80%; 
     float:left; 

     } 
     #footer 
     { 
     float:left; 
     margin-top:100%; 
     width:100%; 
     height:10%; 
     background-color:gray; 
     } 

     </style>

來源

2016-08-19 11:54:32

我沒有得到高度，我給它

回答

相關問題