为什么子元素不占用其父元素的100%高度?

时间:2020-06-26 09:50:45

标签: javascript html css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 50px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: darkgreen;
  font-family: 'Vollkorn', serif;
  font-size: 1.2rem;
  font-weight: bold;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid darkgreen;
}

.text {
  padding: 3px 10px;
}

.checkbox {
  border-left: 3px solid darkgreen;
  cursor: pointer;
  height: 100%;
  width: 45px;
  background: pink;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@1,700&display=swap" rel="stylesheet">
</head>

<body>
  <div class="navbar">
    <div class="header">
      <div class="text">Some Text Here</div>
      <div class="checkbox">
        <i class="fas fa-check"></i>
      </div>
    </div>
  </div>
</body>

</html>

我无法理解为什么border-left: 3px solid darkgreen;上的.checkbox不会占据其父级(即.header)的100%高度。

我正在向.text添加填充,并且我想以某种方式将填充也应用于.checkbox

我在这个问题上停留了几个小时,对纠正此问题的任何帮助将不胜感激。预先感谢!

更新

即使我将padding: 3px 0;添加到.checkbox,也可以解决这种情况,但是,如果屏幕尺寸缩小到.text中的文本不能容纳的地方一条线占用两条线,再次出现相同的问题。因此,在移动设备上看起来很难看。 enter image description here

3 个答案:

答案 0 :(得分:1)

您要在.text中添加一个3px的填充顶部/底部,以影响父级的高度。即使您的复选框的高度为100%,由于这种填充,它也无法到达父级的边框。 最简单的解决方案是在.checkbox中添加填充

.checkbox{
  padding: 3px 0px;
}

更改

所以不要使用padding在多行上完成技巧,可以使用flex 在标头上,使用'align-items:stretch'将强制.checkbox占用其父对象的整个大小,但您也需要删除其高度(.checkbox的高度) 然后您需要将“ fa-check”居中,只需在复选框上使用flex将其居中

.header: {
   align-items: stretch;
}

.checkbox{
  display : flex;
  align-items: center;
  justify-content: center;
  /* height: 100%;
     padding: 3px 0px;
  */
}

答案 1 :(得分:1)

align-items中删除.header,并从height:100%中删除.checkbox

答案 2 :(得分:0)

这是常见的情况。这导致了很多混乱。但是它不会占据所有屏幕,因为父元素不会占据100%的高度。因此,解决方案是将所有父节点的高度设置为100%。甚至html

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
    height: 100%;
}
body {
  margin: 50px;
  height: 100%;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: darkgreen;
  font-family: 'Vollkorn', serif;
  font-size: 1.2rem;
  font-weight: bold;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid darkgreen;
  height: 100%;
}

.text {
  padding: 3px 10px;
   height: 100%;
  
}