3

Почему размер сетки не изменяется в зависимости от размера шрифта, поскольку в настоящее время текст, который находится в элементе header и footer, находится вне их?
Я добавляю font-size:25;.

мне нужно поместить все элементы в div для этого?

:root {
  --light: #666666;
  --dark: #000000;
}

body {
  display: grid;
  grid-template-areas: "header header header" "nav article article" "footer footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 60em;
  margin: 0px;
  padding: 5px 25px 5px 25px;
  background-image: url(code.jpeg);
  background-size: cover;
  background-attachment: fixed;
}

header,
footer,
article,
nav,
div {
  padding: 1.2em;
  background: var(--light);
  opacity: 0.85;
  color: black;
  border-radius: 1.2em;
}

#pageHeader {
  grid-area: header;
  text-align: center;
  font-size: 24px;
}

#pageFooter {
  grid-area: footer;
  font-size: 25px;
  text-align: center;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}


/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {
  body {
    grid-template-areas: "header" "article" "nav" "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}
<header id="pageHeader">
  <h1>header</h1>
</header>

<article id="mainArticle">Article</article>
<nav id="mainNav">
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
<footer id="pageFooter">
  <p>MADE BY</p>
</footer>

2
  • @Antonio112009, почему ответ удалил?
    – Air
    6 дек 2018 в 15:05
  • Alexandr_TT, что бы не возникало таких вопросов, мои первые строчки в css начинаются так *{margin: 0;padding: 0;box-sizing: border-box;} html, body{width: 100%;height: 100%;background-color: #2b2b2b;}
    – Air
    6 дек 2018 в 15:06

2 ответа 2

4

Ой)
Проблема крылась всё таки в h1, а не в padding'е.
Ибо h1, изначально, имеет свой размер шрифта и отступ.

Решение:
Добавить вот такие правила для h1

#pageHeader h1 {
  margin: 0;
  font-size: inherit;
}

:root {
  --light: #666666;
  --dark: #000000;
}

body {
  display: grid;
  grid-template-areas: "header header header" "nav article article" "footer footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 60em;
  margin: 0px;
  padding: 5px 25px 5px 25px;
  background-image: url(code.jpeg);
  background-size: cover;
  background-attachment: fixed;
}

header,
footer,
article,
nav,
div {
  padding: 1.2em;
  background: var(--light);
  opacity: 0.85;
  color: black;
  border-radius: 1.2em;
}

#pageHeader {
  grid-area: header;
  text-align: center;
  font-size: 24px;
}
/* Вот решение */
#pageHeader h1 {
  margin: 0;
  font-size: inherit;
}
/* ----------- */

#pageFooter {
  grid-area: footer;
  font-size: 25px;
  text-align: center;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}


/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {
  body {
    grid-template-areas: "header" "article" "nav" "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}
<header id="pageHeader">
  <h1>header</h1>
</header>

<article id="mainArticle">Article</article>
<nav id="mainNav">
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
<footer id="pageFooter">
  <p>MADE BY</p>
</footer>

2
2

Причина в использовании фиксированного значения для header и footer , поэтому есть переполнение grid-template-rows: 80px 1fr 70px. Нужно заменить фиксированные значения функцией minmax (), чтобы высота регулировалась, если содержимое больше.

:root {
	--light: #666666;
	--dark: #000000;
}

body { 
	display: grid;
	grid-template-areas: 
	  "header header header"
	  "nav article article"
	  "footer footer footer";
	grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content);  
	grid-template-columns: 20% 1fr 15%;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	height: 60em;
	margin: 0px;
	padding: 5px 25px 5px 25px;

	background-image: url(code.jpeg);
	background-size: cover;
	background-attachment: fixed;
}



header, footer, article, nav, div {
	padding: 1.2em;
	background: var(--light);
	opacity: 0.85;
	color:black;
	border-radius: 1.2em;
}

#pageHeader {
	grid-area: header;
	text-align: center;
	font-size: 24px;
}

#pageFooter {
	grid-area: footer;
	font-size: 25px;
	text-align: center;
}

#mainArticle { 
	grid-area: article;      
}

#mainNav { 
	grid-area: nav; 
}
  /* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
	body { 
	  grid-template-areas: 
		"header"
		"article"
		"nav"
		"footer";
	  grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content) 1fr minmax(70px,max-content);  
	  grid-template-columns: 1fr;
   }
}
<header id="pageHeader">
  <h1>header</h1>
</header>

<article id="mainArticle">Article</article>
<nav id="mainNav">
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
<footer id="pageFooter">
  <p>MADE BY</p>
</footer>

1
  • Такой вариант я тоже рассматривал)
    – De.Minov
    7 дек 2018 в 14:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.