Question

我正在尝试创建一个标题，该标题在左侧显示标题，在右侧显示按钮列表。为了实现这一点，需要有一个父级#ChatHeader div，其中包含两个子级div #ChatHeaderTitle和#ChatHeaderControls。

由于某些原因，父div中的8vh高度与子div中的8vh高度不同。两个div的高度均设置为8vh，但父div看起来小于子div。我在宽度上也有同样的问题。

我肯定我缺少明显的东西，但是我一直在尝试我能想到的一切并且无法解决。

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.5vh ），具体取决于您已经进入了盒子），而不是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。

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

<!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>

父级和子级div之间的CSS高度和宽度不一致

1 个答案: