Почему текст выходит за пределы сетки?

151
02 июня 2019, 02:20

Почему размер сетки не изменяется в зависимости от размера шрифта, поскольку в настоящее время текст, который находится в элементе 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>

Answer 1

Ой)
Проблема крылась всё таки в 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>

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

READ ALSO
Сбивается курсор в div contenteditable

Сбивается курсор в div contenteditable

Ниже скрипт который работает как надо, он помогает мне вставлять элементы в div туда, где установлен курсорА если курсора нет, то содержимое...

173
Сброс состояния компонента

Сброс состояния компонента

Решаю задачу по написанию дипломного проектаНедавно костылями и всеми правдами, неправдами пришел к такому коду

157
Преобразование div в изображение и его печать

Преобразование div в изображение и его печать

Хочу распечатать содержимое div со стилями и тп

163