Css 分区大小问题

我对

的大小有问题，该

内部有另一个

元素，内部有

元素：

HTML:

结果：

基本上，我想让div变小，当我使用padding时，它只会使div变大，我尝试过改变高度，但即使在1%或90%的情况下，它仍然决定保持不变，我还取出了div中的

.head\u，但仍然没有任何效果。感谢您的帮助
 高度
未满，而
html
始终至少为视口高度。你可以做：

body { height: 100% }

使百分比高度起作用。或者使用高度

标记的高度大小不会像宽度大小那样继承。必须为每个标记指定高度，或者必须让内容自动设置高度。对于100%高度，每个家长必须拥有100%。这包括HTML标记和Body标记。因此：
上面的答案忽略了HTML需要100%的高度：

HTML

<div class="head">

     <div class="head_in">

         <p id="head_title"> BETA 1.7 </p>

     </div>

 </div>


如果您的站点要投入生产，我会小心使用视口高度。它在很多浏览器上还不起作用
 当我将高度从20%更改为1%时，它会在Mac OS上使用safari和chrome进行更改。想知道你在使用什么平台和浏览器吗？嗯，这很有趣，我认为你是对的，视口高度更好。谢谢我会小心在生产中使用VH，请参见答案below@Matt什么意思？浏览器支持是很重要的。我无法想象为什么会有人想要支持比这更老的浏览器。73%的支持率，如果你是一个为所有IE（这是标准的）提供“我们不支持IE”屏幕的用户，那么支持率会更高。嗯，是的，我不知道为什么我以前从未遇到过这个问题，我做过类似的事情，但没有做这些事情，它总是有效的。我想我会记住它，现在就应用它。谢谢
body { height: 100% }

.head { height: 20vh }

<div class="head">

     <div class="head_in">

         <p id="head_title"> BETA 1.7 </p>

     </div>

 </div>

html, body {
 height:100%;   

}
.head
{
 width: 100%; height: 20%; background-color: #000000; 
}

.head_in
{
     display: block;
}

#head_title
{
         font-size: 0.6 em; color: red; text-align: right;
}