Как увеличить секцию и нормализовать текст? HTML, CSS
Использую section id
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
@charset "UTF-8";
body{
margin: 0;
padding: 0;
}
section{
position: relative;
width: 100%;
height: 850px;
display: flex;
justify-content: center;
align-items: center;
font-size: 5em;
font-weight: 800;
}
section:nth-child(odd){
background: #FFFFFF;
}
section:nth-child(even){
background: #8ED7FF;
}
nav{
position: fixed;
top: 0;
width:100%;
text-align: center;
background: #083353;
}
nav a{
position: relative;
color: aliceblue;
text-decoration: none;
padding: 8px 25px;
font-size: 1.5em;
text-transform: uppercase;
display: inline-block;
}
nav a: hover,
section#n1:hover~nav a[href="#n1"],
section#n2:hover~nav a[href="#n2"],
section#n3:hover~nav a[href="#n3"],
section#n4:hover~nav a[href="#n4"],
section#n5:hover~nav a[href="#n5"],
section#n6:hover~nav a[href="#n6"]
{
background: #A8E9F1;
color: #0E3E44;
}
nav a: active{
background: #94FAB3;
}
123456789101112131415161718192021222324
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title> Проект </title>
</head>
<body>
<section id="1"><sup>Вот тут не мло текста</sup>></section>
<section id="2">Вторая секция</section>
<section id="3">Третья секция</section>
<section id="4">Четвёртая секция</section>
<section id="5">Пятая секция</section>
<section id="6">Шестая секция</section>
<nav>
<a href="#n1">Первая Секция</a>
<a href="#n2">Вторая секция</a>
<a href="#n3">Третья секция</a>
<a href="#n4">Четвёртая секция</a>
<a href="#n5">Пятая секция</a>
<a href="#n6">Шестая секция</a>
</nav>
</body>
</html>
Как растянуть секцию исходя из текста и изображения?
По дате
По рейтингу
Убрать из CSS фиксированный размер секции. Хочешь ограничить размер снизу - min-height, сверху - max-height. А height: 850px; - это всегда 850px: не меньше, и не больше.