我没有得到高度,我给它
嗨,大家好我给了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>
应用此CSS样式对你的内容的div:
#content
{
width:100%;
min-height:450px;
background-color:red;
float:left;
}
这将解决您的问题
@sudharsan这将工作兄弟。 –
ty其略有变化,但y未占用百分比,需要像素值 – sudharsan
@sudharsan在此处查看。这里有一个清楚的解释。我们必须在px中以%和min-height来指定高度。 https://css-tricks.com/almanac/properties/m/min-height/ –
它只是意味着高度是在#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>
百分比不适用于外部div(包装)的高度。在PX中添加高度 – Nikz
我的代码将适用于您的兄弟。检查一下。由于PX工作正常,我也得到了输出。 –