Почему размер сетки не изменяется в зависимости от размера шрифта, поскольку в настоящее время текст, который находится в элементе 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>
Ой)
Проблема крылась всё таки в 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>
Причина в использовании фиксированного значения для 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Ниже скрипт который работает как надо, он помогает мне вставлять элементы в div туда, где установлен курсорА если курсора нет, то содержимое...
Решаю задачу по написанию дипломного проектаНедавно костылями и всеми правдами, неправдами пришел к такому коду