Parent 元素未在悬停状态下填充

Question

我在 .socialheader 上遇到悬停状态问题，我似乎无法弄清楚。我希望社交 header 在悬停事件中填满，但它只会填满 header 内图像的高度。我可以更改什么以使其填满整个高度？

我已经包含了一个 jsfiddle link。 http://jsfiddle.net/theflyingmouse/q43co9tk/1/

.headeractions {
    width: 100%;
    position: relative;
    display: block;
    background: rgb(51, 132, 165);
    overflow: hidden;
}


.requestheader {
    background-color: rgb(12, 109, 149);
    color: white;
    display: inline-block;
    width: 50%;
    text-align: center;
    padding: 2em 0;
    height: 100%;
}

.requestheader:hover {

 background-color: rgb(9, 78, 107);
 transition: 0.5s;
}

.requesttitle {
    margin: 0;
}


.socialheader {
    text-align: center;
    position: relative;
    width: 50%;
    display: inline-block;
    height: 100%;
}

.socialheader:hover {
 background-color: rgb(9, 78, 107);
 transition: .2s;
}


.socialbutton {
    display: inline-block;
    padding: 0 3em;
}

<div class="headeractions">
  <div class="requestheader"><h3>Request a Quote</h3></div><div class="socialheader">
   <div class="socialbutton"><img src="http://i.imgur.com/kPJlZ3U.png"></div><div class="socialbutton"><img src="http://i.imgur.com/kPJlZ3U.png"></div>
  </div>
 </div>

Answer 1

试试这个http://jsfiddle.net/q43co9tk/6/

.socialheader {
    display: inline-block;
    height: 100%;
    padding: 22px 0 50px;
    position: relative;
    text-align: center;
    width: 50%;
}

Answer 2

那这个呢？ http://jsfiddle.net/q43co9tk/7/

只需使用显示 table 和 table-cell

.headeractions{display: table;}
.requestheader{display: table-cell;}
.socialheader{display: table-cell;}

Parent 元素未在悬停状态下填充

Parent Element does not fill on Hover State

html

css

height

hover