时间戳

首页 > 解决方案 > html/css 中的全屏宽度标题

html - html/css 中的全屏宽度标题

问题描述

我知道这是一个常见问题，但我无法让我的标题与我的屏幕大小相同。
我已经尝试将标题包装到另一个 div 中并制作width: 100%. 这没有帮助。

谢谢你的帮助！

body {
  font-family: 'avenirregular';
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
  width: 100%
}


/* Global */

.container {
  width: 85%;
  margin: auto;
  overflow: hidden;
}


/* Header **/

header {
  background: #16205E;
  color: #ffffff;
  padding-top: 30px;
  min-height: 7.5vh;
  border-bottom: #2B8AFF 3px solid;
  display: table-cell;
  vertical-align: middle;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  float: left;
  display: inline;
  vertical-align: top;
  padding: 0 20px 0 20px;
}

header #branding {
  width: 20%;
  float: left;
  padding-top: 0px;
  padding-bottom: 20px;
}

header #home img {
  width: 100%;
  height: 100%;
}

header nav {
  float: right;
  margin-top: 20px;
}
<header>
  <div class="container">
    <div id="branding">
      <a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
    </div>
    <nav>
      <ul>
        <li><a href="page1.html">Content1</a></li>
        <li><a href="page2.html">Content2</a></li>
        <li><a href="page3.html">Content3</a></li>
      </ul>
    </nav>
  </div>
</header>

标签： htmlcss

解决方案

只需display:table-cell从header

body{
  font-family: 'avenirregular';
  padding:0;
  margin:0;
  background-color:#f4f4f4;
  width:100%
}

/* Global */
.container{
  width:85%;
  margin:auto;
  overflow:hidden;
}


/* Header **/

header{
  background:#16205E;
  color:#ffffff;
  padding-top:30px;
  min-height:7.5vh;
  border-bottom:#2B8AFF 3px solid;
 }


header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline;
  vertical-align:top;
  padding: 0 20px 0 20px;
}

header #branding{
  width:20%;
  float:left;
  padding-top:0px;
  padding-bottom:20px;

}

header #home img{
  width:100%;
  height:100%;
}

header nav{
  float:right;
  margin-top:20px;
  
}
  <body>

    <header>
	  <div class="container">
		<div id="branding">
		  <a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
		</div>
		<nav>
		  <ul>
			<li><a href="page1.html">Content1</a></li>
			<li><a href="page2.html">Content2</a></li>
			<li><a href="page3.html">Content3</a></li>
		  </ul>
		</nav>
	  </div>
    </header>
	
  </body>

推荐阅读