我正在尝试在 ASP.NET 中设计一个 Web 表单。因为我试图将背景颜色设置为不同的空 div。通常像下面这样的简单 html 代码可以工作:
<html>
<head>
<style>
#header{
width:100%;
height:20%;
background-color:lightblue
}
#nav-bar{
width:100%;
height:5%;
background-color:lightgreen;
}
body,html{
margin:0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
但是如果我在 ASP.NET 中使用相同的片段，我将无法获得预期的结果。浏览器什么都不显示。我的aspx代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server"><title></title>
<style type="text/css">
#header {
background-color: lightblue;
height: 20%;
width: 100%;
}
#nav-bar {
background-color: lightgreen;
height: 5%;
width: 100%;
}
body, html { margin: 0; }
</style>
</head>
<body runat="server">
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
那么如何在 ASP.NET 中为空的 div 设置背景色呢？任何帮助将非常感激。谢谢!
最佳答案
问题是您的#header和#nav-bar有百分比高度。您会看到，如果将它们更改为 px 尺寸，它们仍然会显示为空的 div。所以你的问题与 ASP.NET 没有任何关系，它只是一个 CSS 问题。
如果您希望高度响应用户的屏幕，您应该尝试使用 vh 标签。这代表 viewport height。因此，如果您有 20vh，它将占据用户屏幕高度的 20%。
查看我更新的 JSfiddle:
关于css - 如何在ASP.NET网页中设置div的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31705986/