CSS Parent 和 Child 之间的高度和宽度不一致 div

Question

我正在尝试创建一个 header，它在左侧显示标题，在右侧显示按钮列表。为了实现这一点，有一个 parent #ChatHeader div，其中包含两个 children divs，#ChatHeaderTitle 和 #ChatHeaderControls。

出于某种原因，parent div 中的 8vh 高度与 children div 中的 8vh 高度不同。两个 div 的高度都设置为 8vh，但 parent div 看起来比 child 小。我对宽度也有同样的问题。

我确定我遗漏了一些明显的东西，但我一直在尝试我能想到的一切，但无法修复它。

我的HTML的简化版：

<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>

听说是我的CSS:

#ChatHeader {
    width:100%;
    height: 8vh;
    overflow: hidden;

    background-color: #000000;
    color: var(--std-background-colour);   
}

#ChatHeaderTitle {
    height: 8vh;
    width: calc(100% - 8vh);

    padding:1vh;
}

#ChatHeaderControls {
    height: 8vh;
    width: 8vh;

    float:right;
    padding: 1vh;
    font-size:1.5vh;
    color: var(--std-background-colour);
}

Answer 1

重置内边距和边距始终是个好主意，这样您就知道自己是从头开始。

这里是基础 -- 您在右侧 div 处进行了填充，这会将 div 扩展到比您想要的更大的范围。是的，填充在 div 的内部是可见的，但它通过填充量扩展了 div。如果你想使用 1.5vh 的填充，你应该使你的权利 div 8vh + 1.5vh = 9.5vh （或 8vh - 1.5vh = 6.5 vh，取决于你的盒子里有什么），而不是 8vh。 "By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added."

此外，您的第二个 div 向右浮动，但您的第一个 div 没有向左浮动 - 所以您的浮动不太正确。如果在左侧 div 添加一个左浮点数，则尊重右浮点数 div。

下面的代码适合您。但是，如果我是你，我会考虑将其转换为网格布局，而不是浮动的 divs——它最终会让你的生活更轻松。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body, #ChatHeader, #ChatHeaderTitle, #ChatHeaderControls {
            padding : 0px ; 
            margin : 0px ; 
        }
        #ChatHeader {
            width:100%;
            height: 8vh;
            overflow: hidden;
            background-color: #000000;
        }       
        #ChatHeaderTitle {
            height: 8vh;
            width: calc(100% - 8vh);
            background-color : pink ; 
            padding:0vh;
            float : left ; 
        }       
        #ChatHeaderControls {
            height: 8vh;
            width: 8vh;
            background-color : blue ; 
            font-size:1.5vh;
            float : right ; 
        }
    </style>

</head>
<body>
<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>
</body>
</html>

CSS Parent 和 Child 之间的高度和宽度不一致 div

CSS Height and Width Aren't Consistent between Parent and Child div

html

css

web

height

width