Question

我有一个header div，其中有nav个ul，其中列表项水平显示。

我希望这些列表项目是height的{{1}}的100％。

我已尝试将header放在height: 100%，nav，ul和li，但无效。

如何让我的导航100％成为a的{{1}}？

这是一个jsFiddle来向您展示我的意思。

这是我的CSS：

height

这是我的HTML：

header

Answer 1

喜欢这个？我希望它可以帮助你！：）

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>

Answer 2

简单地向line-height:18px添加h1，因为您的font-size:36px导致标题增长

为演示

删除了一些li

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;
  line-height: 18px
}
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%;
}

<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>
    </ul>
  </nav>
</header>

如何让导航成为标题的100％高度？

2 个答案: