Как создать стиль заголовка, охватывающий от левого края до правого края экрана независимо от его размера? - PullRequest
Новая
       108

Как создать стиль заголовка, охватывающий от левого края до правого края экрана независимо от его размера?

0 голосов
/ 30 мая 2020

Я хочу растянуть эту СИНЮЮ ПОЛОСКУ от одного конца экрана до другого. Теперь он растягивается на 980 пикселей. В зависимости от размера экрана он должен охватывать от одного конца до другого.

Если я увеличу 980 пикселей, выравнивание изменится. Как сделать панель отзывчивой?

Какой CSS мне следует использовать?

Blue bar not long

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>

Ответы [ 2 ]

2 голосов
/ 30 мая 2020

Вы должны использовать 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;
}
1 голос
/ 30 мая 2020

Попробуйте, он растянет стержни. И поместите содержимое своей страницы в раздел .wrapper, оно будет 980 пикселей и центрировано 

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>
...