Question

我正在尝试在ASP.NET中设计一个Web表单。我试图将背景颜色设置为不同的 空divs 。通常一个简单的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设置背景颜色？任何帮助将非常感激。谢谢！

Answer 1

问题是您的#header和#nav-bar有百分比高度。您会看到是否将它们更改为px尺寸，它们仍会显示空白。所以你的问题与ASP.NET没什么关系，它只是一个CSS问题。

如果您希望高度响应用户的屏幕，则应尝试vh标记。这代表viewport height。因此，如果你有20vh，它将占用用户屏幕高度的20％。

请参阅我更新的JSfiddle：

http://jsfiddle.net/0mr9z6hy/2/

Answer 2

跨浏览器的百分比高度可能会有所不同

但有一个问题是你的身体上没有指定身高，所以身高实际上只是你网页实际内容的高度。

html, body{
    height: 100%;
}

如何在ASP.NET网页中设置div的背景颜色

2 个答案: