如何创建与父div相同的子div的边框高度？

Question

我有一个带有一些填充的儿童div。 但是，当我在子div上应用border-right时，如何获得全高呢？ 这是代码：

<div class="parent">
  <div class="child">
    <h2>Content</h2>
  </div>
</div>

.parent{
  border: 2px solid black;
}
.child{
  width: 25%;
  border-right: 2px solid red;
}

我当前代码的输出：

我真正想要的是：

我是新手，这将是很大的帮助。 谢谢

Answer 1

您的问题是h2标签从浏览器获取默认的上边距和下边距。 您可以将其设置为零（ 此处为示例）：

h2 { margin: 0 }

或者，如果要保留它们，则可以将子容器的溢出设置为隐藏：

.child {overflow: hidden;}

下面的例子：

 .parent { border: 2px solid black; } .child { width: 25%; overflow: hidden; border-right: 2px solid red; } 

 <div class="parent"> <div class="child"> <h2>Content</h2> </div> </div> 

然后在JSFiddle上 。

Answer 2

删除<h1>元素的默认margin ，然后使用padding您可以将text对齐到父div的中心，并将height:100%设置为子div，如下所示，

 .parent{ border: 2px solid black; height:40px; } .child{ width: 25%; height:100%; border-right: 2px solid red; } h2{ margin:0; padding-top:8px; } 

 <div class="parent"> <div class="child"> <h2>Content</h2> </div> </div> 

Answer 3

您应该继承父母的最大身高。 尝试将其添加到your.child中，

.child{
 max-height:parent;
}