Блог

Главная - Вопросы по программированию - Почему высота 50% не покрывает полностью html

Почему высота 50% не покрывает полностью html

#html #css

#HTML #css

Вопрос:

Итак, у меня есть один внешний div, и внутри этого div я хочу разделить на два равных по высоте div что-то вроде:

введите описание изображения здесь

Однако в моем HTML-документе у меня есть следующее:

введите описание изображения здесь

Как показано, даже если я поровну разделю каждый div на 50% высоты, похоже, останется какой-то крошечный пробел. Почему это происходит?

Редактировать: что, если я добавлю два дочерних элемента в верхней части, придав им высоту 100%?

введите описание изображения здесь 

 html, body {
    height: 100%;
}

* {
    box-sizing: border-box;
}

.outer {
    border: 1px solid black;
    height: 50%;
    width: 50%;
}

.top {
    border: 1px solid black;
    height: 50%;
    width: 100%;
}

.bottom {
    border: 1px solid black;
    height: 50%;
    width: 100%;
}

/*Added child divs*/
.child_1 {
    border: 1px solid black;
    height: 100%;
    width: 50%;
}

.child_2 {
    border: 1px solid black;
    height: 100%;
    width: 50%;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class = "outer">
    <div class = "top">
      <div class = "child_1">

      </div>
      <div class = "child_2">

      </div>
    </div>
    <div class = "bottom">

    </div>
  </div>
</body>
</html>

Ответ №1:

На самом деле он выходит наружу, потому что вы не сбросили box-sizing свойство для включения border и padding в вычисление внешнего размера.

 html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.outer {
  border: 1px solid black;
  height: 50%;
  width: 50%;
}

.top {
  border: 1px solid black;
  height: 50%;
  width: 100%;
}

.bottom {
  border: 1px solid black;
  height: 50%;
  width: 100%;
}  
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="outer">
    <div class="top">

    </div>
    <div class="bottom">

    </div>
  </div>
</body>

</html>

Информация об этом :

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Свойство box-sizing CSS определяет, как вычисляется общая ширина и высота элемента.

Смотрите также:

https://css-tricks.com/almanac/properties/b/box-sizing/

box-sizing Свойство в CSS управляет тем, как обрабатывается модель box для элемента, к которому она применяется.

Редактировать после того, как вопрос был отредактирован и перефразирован:

Размер внутреннего поля определяется по доступной внутренней высоте (за вычетом отступов и / или границ, если таковые имеются), дочерние элементы на втором уровне не имеют размера по высоте основного родителя. Тогда вам нужно помнить об этой разнице. Вы можете нажать на второе внутреннее поле размером 2 пикселя вниз, средний размер которого отсутствует в границах родительского элемента.

 html, body {
    height: 100%;
}

* {
    box-sizing: border-box;
}

.outer {
    border: 1px solid yellow;
    height: 50%;
    width: 50%;
}

.top {
    border: 1px solid black;
    height: 50%;
    width: 100%;
    /* see me */
    border-color:green;
}

.bottom {
    border: 1px solid black;
    height: 50%;
    width: 100%;
    /* see me */
    border-color:cyan;
}

/*Added child divs*/
.child_1 {
    border: 1px solid black;
    height: 100%;
    width: 50%;
    /* see me */
    border-color:blue;
}

.child_2 {
    border: 1px solid black;
    height: 100%;
    width: 50%;
    /* add those borders to go through */
    margin-top:2px;
    /* see me */
    border-color:red;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class = "outer">
    <div class = "top">
      <div class = "child_1">

      </div>
      <div class = "child_2">

      </div>
    </div>
    <div class = "bottom">

    </div>
  </div>
</body>
</html>

Комментарии:

1. спасибо, теперь, что, если в верхней части я добавлю еще два дочерних элемента и присвою им высоту 100%, теперь второй дочерний элемент будет переполнен до дна, что ожидается, но затем разрыв возникает снова. возможно ли избавиться от разрыва в этом случае? Это было бы так, как в I will give animation дочерним разделам, в которых второй дочерний раздел поднимался бы до вершины с translateY (-100%).). Я обновил свой пост.

2. сделайте 2 дочерних элемента плавающими или .top display: flex… итак, они стоят бок о бок… во время тестирования укажите разные цвета границ вашего div, чтобы увидеть, где они находятся. 100% 100% равно 200%, второй переполняется от своего родителя…

3. на самом деле я бы не хотел, чтобы они были рядом.

4. таким образом, он переполняет поле и переполняет вторую строку. Если это другой вопрос, задайте другой вопрос, прежде чем какие-либо ответы здесь будут выглядеть странно и далеко от вопроса 😉

5. переполнение второго поля получает размер из внутреннего поля, к которому оно принадлежит, исключая границы, этот пробел у вас отсутствует, отсутствует около 2 пикселей (граница его собственного родителя и граница второй строки. .child_2 {margin-top:2px;}

Ответ №2:

в CSS добавьте приведенный ниже код.

* { box-sizing: border-box; }