父元素不会填写悬停状态

Question

我在.socialheader上有悬停状态的问题，我似乎无法弄明白。我希望社交标题填满悬停事件，但它只填充标题内图像的高度。我可以改变什么来填满整个高度？

我添加了一个jsfiddle链接。 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/7/

只使用display table和table-cell

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

Answer 2

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

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