如何创建子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

删除<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 2

你应该继承父母的最大高度。尝试添加到这个your.child，

.child{ 
max-height:parent; 
} 

Answer 3

您的问题是h2标签获取默认的顶部和底部边缘从浏览器。您可以设置这些零（例如here）：

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>

的d在JSFiddle。