Высота и ширина CSS не совпадают между родительским и дочерним div - PullRequest
Новая
       8

Высота и ширина CSS не совпадают между родительским и дочерним div

0 голосов
/ 21 февраля 2019

Я пытаюсь создать заголовок, который показывает заголовок слева и список кнопок справа.Для этого есть родительский div #ChatHeader, который содержит два дочерних div, #ChatHeaderTitle и #ChatHeaderControls.

По некоторым причинам высота 8vh в родительском div не совпадает с высотой 8vh в дочерних div.Оба div имеют высоту 8vh, но родительский 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);
}

1 Ответ

0 голосов
/ 21 февраля 2019

Это всегда хорошая идея, чтобы сделать сброс на отступы и поля, так что вы знаете, что вы начинаете с чистого листа.

Фундаментальный здесь - у вас есть отступ на правой стороне div, который расширяет div до большего, чем вы хотите.Да, отступ виден внутри div, но он расширяет div на величину заполнения.Если вы хотите использовать 1.5vh отступа, вы должны сделать правильный div 8vh + 1.5vh = 9.5vh (или 8vh - 1.5vh = 6.5vh , в зависимости от того, что выу меня в коробке) вместо 8вх. "По умолчанию в блочной модели CSS ширина и высота, назначаемые элементу, применяются только к блоку содержимого элемента. Если элемент имеет какие-либо границы или отступы, он добавляется к ширине и высоте для полученияна размер поля, отображаемого на экране. Это означает, что когда вы устанавливаете ширину и высоту, вы должны отрегулировать значение, которое вы даете, чтобы учесть любые границы или отступы, которые могут быть добавлены. "

Кроме того, ваш второй div смещен вправо, но ваш первый div не был смещен влево - так что ваши floats не совсем правильные.Если вы добавите левый плавающий элемент в левый 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...