我有一个header div,在它的里面,我有一个navul,其中列表项水平显示。

我希望这些列表项是heightheader的100%。

我尝试将height: 100%放在navullia上,但是没有任何效果。

如何使导航成为heightheader 100%?

这是jsFiddle来告诉我我的意思。

这是我的CSS:

header {
    margin-bottom: 0px;
    background: rgb(76,77,74); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(76,77,74,1) 0%, rgba(55,56,52,1) 49%, rgba(38,39,35,1) 51%, rgba(16,17,13,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4d4a', endColorstr='#10110d',GradientType=0 ); /* IE6-9 */
    padding: 15px;
    overflow: auto;
    border-bottom: 1px solid #646562;
    box-shadow:         0px 14px 50px 0px rgba(255, 255, 255, 0.20);
}

header #branding {
    float: left;
}

header #branding h1 {
    font-size: 36px;
    font-family: ErasBold;
    color: #00d6dd;
    margin: 0px;
}

header nav {
    float: right;
    height: 100%;
}
header nav ul {
    list-style: none;
    margin: 0;
    height: 100%;
}
header nav ul li {
    display: inline-block;
    height: auto;
}
header nav ul li a {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#020000+0,000000+87,000000+100&0+0,0+88,0.5+100 */
background: -moz-linear-gradient(left,  rgba(2,0,0,0) 0%, rgba(0,0,0,0) 87%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00020000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
    padding: 10px 25px;
    color: #d4ff00;
    border-left: 1px solid rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-family: ErasBold;
    height: 100%;
}


这是我的HTML:

<header>
    <div id="branding">
        <h1>Command Center</h1>
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Roster</a></li>
            <li><a href="#">Matches</a></li>
            <li><a href="#">Servers</a></li>
            <li><a href="#">Recruiting</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

最佳答案

像这样?希望对您有所帮助! :)



header {
	margin-bottom: 0px;
	background: rgb(76,77,74); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(76,77,74,1) 0%, rgba(55,56,52,1) 49%, rgba(38,39,35,1) 51%, rgba(16,17,13,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(76,77,74,1) 0%,rgba(55,56,52,1) 49%,rgba(38,39,35,1) 51%,rgba(16,17,13,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4d4a', endColorstr='#10110d',GradientType=0 ); /* IE6-9 */
	padding: 15px;
	overflow: auto;
	border-bottom: 1px solid #646562;
	box-shadow:         0px 14px 50px 0px rgba(255, 255, 255, 0.20);
}

header #branding {
	float: left;
        width: 25%;
}

header #branding h1 {
	font-size: 30px;
	font-family: ErasBold;
	color: #00d6dd;
	margin: 0px;
}

header nav {
	width: auto;
        overflow: hidden;
	height: 100%;
}
header nav ul {
	list-style: none;
	margin: 0;
	height: 100%;
}
header nav ul li {
	display: inline-block;
	height: auto;
        float: left;
}
header nav ul li a {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#020000+0,000000+87,000000+100&0+0,0+88,0.5+100 */
background: -moz-linear-gradient(left,  rgba(2,0,0,0) 0%, rgba(0,0,0,0) 87%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(2,0,0,0) 0%,rgba(0,0,0,0) 87%,rgba(0,0,0,0) 88%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00020000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */
	padding: 10px 25px;
        display: block;
	color: #d4ff00;
	border-left: 1px solid rgba(0, 0, 0, 0.4);
	border-right: 1px solid rgba(255, 255, 255, 0.4);
	text-decoration: none;
	font-family: ErasBold;
	height: 100%;
}

<header>
    <div id="branding">
    	<h1>Command Center</h1>
    </div>
    <nav>
    	<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Roster</a></li>
            <li><a href="#">Matches</a></li>
            <li><a href="#">Servers</a></li>
            <li><a href="#">Recruiting</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

09-25 17:18
查看更多