我一直在四处寻找解决这个问题,我没有看到为什么会发生这种情况以及我如何解决它的问题。 基本上我有一个div,我设置为100%的宽度和高度,在里面我有一个像一个broswer标签部分,我添加一个边距和填充到主要区域,当我设置标签div为全宽它粘一些像素,什么是正确的方式来处理童话div在玩%s和边缘/填充时伸出父母div
<div class="appview_fullscreen app_ama">
<center><strong>AMAMAMAMAMAMA</strong> </br>
<i>AMAMAMA</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
.appview_fullscreen
{
width: 100% !important;
height: 100%;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
}
.app_ama
{
}
.main_area
{
border: 1px solid green;
width: 100%;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
width: 100%;
}
答案 0 :(得分:8)
只需从100%
元素中删除DIV
即可。
.main_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area{
/* width:100%; Why? I'm a DIV! */
border: 1px solid green;
height: 20px;
}
作为 Block level 元素的DIV已经很宽,因为它是父容器。
此外,您还有一个拼写错误:</br>
应为<br />
,<br/>
或<br>
答案 1 :(得分:1)
对于您的填充和边框,请使用box-sizing: border-box;
。