html - 子div覆盖父div的宽度

Question

我一直在挖掘我的问题的答案并不断尝试一切，但到目前为止我所做的所有尝试都失败了。开始了:

我的父面板有 id 作为 secondPanel 并且它的宽度由 JavaScript 固定

document.getElementById("secondPanel").style.width = (screen.width-12) + "px";

我没有使用“width:100%”，因为它会在我的视口(viewport)底部产生一个滚动条。我希望即使浏览器大小发生变化，我的布局位置也能保持不变。

#secondPanel{
    float: left;
    margin-top: 15px;
    padding:0px;
    border-style: solid;
    border-width:2px;
    border-color: black;
    background: red;
}

#tryP{
    float:left;
    width:200px;
    border-style: solid;
    border-width:2px;
    border-color: black;
    background: white;
}

#childDiv{
    float:left;
    border-style: solid;
    border-width:2px;
    border-color: black;
}

但是，每次我将子 div inside 父 div 并为其放置一个 width ，如果滚动条的 width 小于父元素的 width ，则滚动条再次出现even。但是当我输入 p 时，滚动条没有出现。我该怎么办？我的 child div 有什么问题？

Answer 1

试试这个:

将 childDiv 宽度设置为 100%

#childDiv{
width:100%;
float:left;
border-style: solid;
border-width:2px;
border-color: black;
}