如何将浮动链接元素设为其父 div 的 100% 高度

Question

我在页面底部有一个导航。一切正常，我希望它如何，除了一个小错误，我似乎无法找到解决方案......

当页面名称很长并且您在 iPad 大小的屏幕上查看时，名称会出现在两行 - 这很好 - 我希望相邻按钮与高度匹配（这样它们都保持相同的高度) 并保持与中心水平对齐。

我尝试了一些不同的方法，例如显示表格和表格单元格、flex 等，但我似乎无法找到一个正常工作的解决方案。

关于如何做到这一点的任何建议...？

.footerNav-wrapper {
	width: 100%;
	background-color: #000;
	padding: 35px 0;
	z-index: 9000;
	position: relative;
}

.footerNav {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.navArrow-left {
	float: left;
	margin: 0;
	position: absolute;
	top: 30%;
	left: 10px
}

.navArrow-right {
	float: right;
	margin: 0;
	position: absolute;
	top: 30%;
	right: 10px;
}

.footerNav a {
	width: 49%;
	font-family: 'ABCSans-Regular', Arial, sans-serif;
	border: 1px solid #fff;
	background-color: #000;
	color:#ffc600;
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	cursor: pointer;
	-webkit-transition: all .5s;
    transition: all .5s;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
}

.footerNav a:hover {
	border: 1px solid #ffc600;
	background-color: #ffc600;
	color: #000;
	text-decoration: none;
}

.left {
	float: left;
	text-align: left !important;
	padding: 15px 15px 12px 45px;
}

.right {
	float: right;
	text-align: right !important;
	padding: 15px 45px 12px 15px;
}

<div class="footerNav-wrapper">
	<nav class="footerNav">
    	<a href="#" class="left">
        	<img src="images/arrow-left-white.png"  class="navArrow-left" alt="Previous page">
        	PREVIOUS PAGE NAME
        </a>
        <a href="c#" class="right">
            NEXT PAGE NAME - THIS IS AN EXTRA LONG NAME
            <img src="images/arrow-right-white.png"  class="navArrow-right" alt="Next page">
        </a>
        <div style="clear:both;"></div>
    </nav>
</div>

Answer 1

我在.footerNav 上使用了display:flex;，并为左右类添加了边距。

.footerNav-wrapper {
	width: 100%;
	background-color: #000;
	padding: 35px 0;
	z-index: 9000;
	position: relative;
}

.footerNav {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
    display:flex;
}

.navArrow-left {
	float: left;
	margin: 0;
	position: absolute;
	top: 30%;
	left: 10px
}

.navArrow-right {
	float: right;
	margin: 0;
	position: absolute;
	top: 30%;
	right: 10px;
}

.footerNav a {
	width: 49%;
	font-family: 'ABCSans-Regular', Arial, sans-serif;
	border: 1px solid #fff;
	background-color: #000;
	color:#ffc600;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	cursor: pointer;
	-webkit-transition: all .5s;
    transition: all .5s;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
}

.footerNav a:hover {
	border: 1px solid #ffc600;
	background-color: #ffc600;
	color: #000;
	text-decoration: none;
}

.left {
	float: left;
	text-align: left !important;
	padding: 15px 15px 12px 45px;
    margin-right: 1%;
}

.right {
	float: right;
	text-align: right !important;
	padding: 15px 45px 12px 15px;
    margin-left: 1%;
}

<div class="footerNav-wrapper">
	<nav class="footerNav">
    	<a href="#" class="left">
        	<img src="images/arrow-left-white.png"  class="navArrow-left" alt="Previous page">
        	PREVIOUS PAGE NAME
        </a>
        <a href="c#" class="right">
            NEXT PAGE NAME - THIS IS AN EXTRA LONG NAME
            <img src="images/arrow-right-white.png"  class="navArrow-right" alt="Next page">
        </a>
        <div style="clear:both;"></div>
    </nav>
</div>

Answer 2

如果您需要支持非常旧的浏览器 (http://caniuse.com/#search=flex)，您也可以使用 display: table; 和 display: table-cell; 来执行此操作。不过我会推荐使用 flexbox，正如GvM 指出的那样。

有一篇有趣的文章介绍了几种方法来做你想做的事：https://css-tricks.com/fluid-width-equal-height-columns/

.footerNav-wrapper {
	width: 100%;
	background-color: #000;
	padding: 35px 0;
	z-index: 9000;
	position: relative;
}

.footerNav {
    display: table;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.navArrow-left {
	float: left;
	margin: 0;
	position: absolute;
	top: 30%;
	left: 10px
}

.navArrow-right {
	float: right;
	margin: 0;
	position: absolute;
	top: 30%;
	right: 10px;
}

.footerNav a {
	width: 49%;
	font-family: 'ABCSans-Regular', Arial, sans-serif;
	border: 1px solid #fff;
	background-color: #000;
	color:#ffc600;
	margin: 0;
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0px;
	cursor: pointer;
	-webkit-transition: all .5s;
    transition: all .5s;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
}

.footerNav a:hover {
	border: 1px solid #ffc600;
	background-color: #ffc600;
	color: #000;
	text-decoration: none;
}

.left {
    display: table-cell;
	text-align: left !important;
	padding: 15px 15px 12px 45px;
}

.right {
    display: table-cell;
	text-align: right !important;
	padding: 15px 45px 12px 15px;
}

<div class="footerNav-wrapper">
	<nav class="footerNav">
    	<a href="#" class="left">
        	<img src="images/arrow-left-white.png"  class="navArrow-left" alt="Previous page">
        	PREVIOUS PAGE NAME
        </a>
        <div style="display: table-cell; width: 2%;"></div>
        <a href="c#" class="right">
            NEXT PAGE NAME - THIS IS AN EXTRA LONG NAME
            <img src="images/arrow-right-white.png"  class="navArrow-right" alt="Next page">
        </a>
    </nav>
</div>