如何创建子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标记从浏览器获取默认的上下边距。您可以将它们设置为零（例如here）：

h2 { margin: 0 }

或者，如果您想保留它们，请将子容器溢出设置为隐藏：

.child {overflow: hidden;}

以下示例：

＆＃13;

＆＃13;

.parent {
    border: 2px solid black;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

并JSFiddle。

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该继承父级的最大高度。尝试将此添加到your.child，

.child{
 max-height:parent;
}