使用百分数时，CSS div标签不是父级的大小

Question

我试图让我的HTML中的div标签占父div大小的百分比，而不是太小或太大。当我用这段代码检查div的大小时得到的结果：

#main {
    width: 800px;
    height: 800px;
    margin: 0 auto;
}

.sidebar {
    width: 31%;
    margin-right: 1%;
    margin-left: 2%;
}

.content {
    width: 61%;
    margin-right: 2%;
    margin-left: 1%;
}

.sidebar, .content {
    background: #888;
    height: 100%;
    float: left;
    border-radius: 4px;
    color: #FFF;
    font-family: Helvetica;
    text-align: center;
}

.sidebar_inner, .content_inner {
    height: 100%;
    width: 100%;
    padding: 0%;
    font-size: 1em;
    background-color: black;
}

<div id="main">
    <div class="sidebar">
        <div class="sidebar_inner">
            <h1>Hello!</h1>
        </div>
    </div>
    <div class="content">
        <div class="content_inner">
            <h1>Hello again!</h1>
        </div>
    </div>
</div>

蓝色框是内部div标签。这是一个更好的问题图片

Answer 1

您需要在宽度和身高上设置单位，例如px，em，rem，%，vh，{{1} }。

• See more here at W3.org
• Solution from your example

Answer 2

#main的所有属性都需要一个测量单位......

#main {
width: 800px
height: 800px;
margin: 0px auto;
}

对于你的例子，px很好。

Answer 3

问题是h1 margin。浏览器具有行高，边距和标题字体大小等的默认样式。但是，您可以通过将margin:0;提供给h1元素或使用css reset来解决您的问题来解决您的问题。

h1
{
   margin:0;
   padding:0;
}

#main {
    width: 800px;
    height: 800px;
    margin: 0 auto;
}

.sidebar {
    width: 31%;
    margin-right: 1%;
    margin-left: 2%;
}

.content {
    width: 61%;
    margin-right: 2%;
    margin-left: 1%;
}

.sidebar, .content {
    background: #888;
    height: 100%;
    float: left;
    border-radius: 4px;
    color: #FFF;
    font-family: Helvetica;
    text-align: center;
}

.sidebar_inner, .content_inner {
    height: 100%;
    width: 100%;
    padding: 0%;
    font-size: 1em;
    background-color: black;
}

h1
{
   margin:0;
   padding:0;
}

<div id="main">
    <div class="sidebar">
        <div class="sidebar_inner">
            <h1>Hello!</h1>
        </div>
    </div>
    <div class="content">
        <div class="content_inner">
            <h1>Hello again!</h1>
        </div>
    </div>
</div>

Answer 4

这种情况正在发生，因为你的H1标签上有一个上边距。