Question

当我在css中使用宽度和高度的百分比值时，它无法正常工作...... 有人可以清楚地向我解释如何给出css属性的百分比值以及它是如何工作的？谢谢你提前

这是我的css

    body 
{
    width:1440px;
    height:900px;

}
div.head
{
    background-image:url(Head.png);
    background-position:top center;
    width:100%;
    height:25%;
}
div.main
{
    background-color:White;
    width:100%;
    height:50%
}
div.foot
{
    background-color:White;
    width:100%;
    height:50%
}

在浏览器上生成的HTML：

<!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">
<head><title>
    Main
</title><link rel="Stylesheet" type="text/css" href="Css/StyleSheet1.css" />
    <script type="text/jscript" src="Js/JScript1.js"></script>


</head>
<body >
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkKXI1tlT7ICPHcASdjP2BI5BEiw8ccKKJsW4NczkZMbs=" />

</div>

    <div id="header" class="head">
    Menu comes here
    </div>
    <div id="main" class="main">

Body comes here

    </div>
     <div id="footer" class="foot">
   footer comes here
    </div>

    </form>
</body>
</html>

Answer 1

我保证百分比“正常”。他们只是没有做你所期望的。

height: 50%意味着元素的高度将是包含它的框的高度的一半。所以，你的问题可能是包含元素不够高（如果你的样式元素太短）或太高（如果你的样式元素高于预期）。

您应该使用Chrome开发者工具之类的工具来检查网页上元素的大小，看看哪个与您的假设不符，然后使用CSS来解决问题。

Answer 2

你的CSS应该是：

body 
{
    width:1440px;
    height:900px;

}
div.head
{
    background-image:url(Head.png);
    background-position:top center;
    width:100%;
    height:25%;
}
div.main
{
    background-color:white;
    width:100%;
    height:50%;
}
div.foot
{
    background-color:white;
    width:100%;
    height:50%;
}

我添加了分号并将White更改为white。

百分比应该正常工作但我不认为你知道它的作用。

来自Borealid的回答：

height: 50%意味着元素的高度将是包含它的框的高度的一半。所以，你的问题可能是包含元素不够高（如果你的样式元素太短）或太高（如果你的样式元素高于预期）。

百分比在css中没有正常工作

2 个答案: