无论屏幕大小如何，如何创建从屏幕最左端到右端的标题样式？答案

【问题标题】：How do I create a header style which spans from left most end to right end of the screen irrespective of screensize?无论屏幕大小如何，如何创建从屏幕最左端到右端的标题样式？
【发布时间】：2020-05-30 06:34:01
【问题描述】：

我想将这个蓝条从屏幕的一端拉伸到另一端。现在它正在拉伸 980px。根据屏幕尺寸，它应该从一端跨越到另一端。

如果我增加 980px，对齐方式就会改变。如何让栏响应？

我应该使用什么 CSS ？

html {
  height: 100%;
  width: 100%;
}

body {
  height: 980px;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 980px;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0B61A5;
  color: white;
}

navigation {
  width: 980px;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 980px;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}

footer {
  width: 940px;
  height: 20px;
  margin: 0 0 10px 0;
  padding: 10px 20px;
  background: #0B61A5;
  color: white;
}

  
<html>
	<body>
	    
		<header>
			<h1>OEMS User Area</h1>
		</header>
		
		<navigation>
			<ul>
				<li>User: </li>
				<li> <a href="">Home</a> </li>
				<li> <a href="">Logout</a> </li>
			</ul>
		</navigation>
		
		<footer> O.E.M.S </footer>
		
	</body>
</html>

【问题讨论】：

标签： html css responsive-design responsive stylesheet

【解决方案1】：

对于任何设备尺寸，您都应该使用 width:100% 将标题拉伸到全宽。如果您想要针对不同设备尺寸的其他设计，请使用媒体查询。在https://www.w3schools.com/css/css_rwd_mediaqueries.asp

了解有关响应式设计的更多信息

body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

header {
 width: 100%;
 height: 40px;
 margin: 0 0 10px 0;
 padding: 0;
 background: #0B61A5;
 color: white;
}

【讨论】：

【解决方案2】：

试试这个，它会拉伸钢筋。并将你页面的内容放在.wrapper部分，它将是980px并居中

html {
 
  width: 100%;
}

body {
   
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0B61A5;
  text-align: center;
  color: white;
}

navigation {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}

footer p {
   padding: 10px 20px;
}
footer {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0px;
  background: #0B61A5;
  color: white;
}
.wrapper {
   min-height: 900px;
   width: 980px;
   margin: auto;
   display: block;
}

<html>
	<body>
	    
		<header>
			<h1>OEMS User Area</h1>
		</header>
		<navigation>
			<ul>
				<li>User: </li>
				<li> <a href="">Home</a> </li>
				<li> <a href="">Logout</a> </li>
			</ul>
	    </navigation>
		<section class='wrapper'>
		    THE CONTENT GOES HERE !
        </section>
		<footer><p> O.E.M.S </p></footer>    		
	</body>
</html>

【讨论】：