Question

我在调整内部有<div>内部和<div>元素的<p>时遇到问题：

HTML：

 <div class="head">

         <div class="head_in">

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

         </div>

     </div>

CSS：

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

.head_in
{
     display: block;
}

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

结果：http://i.imgur.com/XywmCcp.jpg

基本上我想让div更小，当我使用填充它只是使它更大，我已经尝试改变高度但是即使在1％或90％这个问题它仍然决定保持不变，我也有取出.head_in div，但仍然没有。任何帮助表示赞赏！

Answer 1

<body>的高度未满，而html始终至少为视口高度。你可以这样做：

body { height: 100% }

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

.head { height: 20vh }

Answer 2

标签的高度大小不会像宽度大小那样继承。您必须为每个标记指定高度，或者必须让内容自动设置高度。对于100％身高，每个父母必须有100％。这包括HTML标记＆amp;＆amp;身体标签。因此：上面的答案错过了HTML也需要100％的高度：

<强> HTML

<div class="head">

     <div class="head_in">

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

     </div>

 </div>

<强> CSS

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;
}

JSFiddle 如果您的网站要投入生产，我会小心使用视口高度。它还不适用于很多浏览器。

分配问题

2 个答案: