У меня есть div
на странице, в теге <header>
, на котором отображается изображение (фон), две надписи и кнопка.
<header>
<div class="main-section">
<h1 class="main-label main-color">Welcome To The Beach!</h1>
<p class="secondary-font main-color">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero,
inventore ipsum quis accusamus placeat veritatis.
</p>
<button class="btn main-color secondary-font">Read More!</button>
</div>
</header>
Этот div привязан к css-классу .main-section
, вот его содержимое:
.main-section {
background-image: url("../img/beachshowcase.jpg");
background-size: 100% 100%;
/* background-size: cover; - не работает =((( */
background-position: center;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
text-align: center;
}
Все отображается так, как я и хочу.
Но далее, в теге <main>
я хочу разместить еще один <div>
с основной информацией. Сделал это:
<main>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
blanditiis sed eveniet quae, dolores aliquam eius praesentium minima
doloremque atque nobis animi velit nulla dolore? Impedit quo fugit
voluptatum perferendis.
</div>
</main>
Проблема возникает на этом моменте: я просто не вижу <div>
, который в теге <main>
. Я и хотел этого, но ожидал, что появиться полоса прокрутки, с помощью которой можно бы было прокрутиться к основной информации - но она не появляется.
Как исправить эту проблему?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-section {
background-image: url("../img/beachshowcase.jpg");
background-size: 100% 100%;
/* background-size: cover; - не работает =((( */
background-position: center;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
text-align: center;
}
.main-color {
--color: #926239;
color: var(--color);
}
.main-label {
font-size: 50px;
line-height: 1.2;
font-weight: bold;
margin-bottom: 0.5%;
margin-top: 17.5%;
}
.secondary-font {
font-size: 20px;
}
.btn {
margin-top: 1.5%;
padding: 1%;
width: 10%;
max-width: 200px;
border-radius: 10px;
border-color: var(--color);
border-width: 0.5px;
text-align: center;
background-color: transparent;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/styles/styles.css" />
<title>Freshcode - Main Page</title>
</head>
<body>
<header>
<div class="main-section">
<h1 class="main-label main-color">Welcome To The Beach!</h1>
<p class="secondary-font main-color">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, inventore ipsum quis accusamus placeat veritatis.
</p>
<button class="btn main-color secondary-font">Read More!</button>
</div>
</header>
<main>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi blanditiis sed eveniet quae, dolores aliquam eius praesentium minima doloremque atque nobis animi velit nulla dolore? Impedit quo fugit voluptatum perferendis.
</div>
</main>
<footer></footer>
</body>
</html>
Как это отображается у меня в браузере:
Вот здесь проблема:
<div>
, который я вставил в теге - его не видно. Судя по всему, он встал в самом начале страницы, а мне нужно чтобы он был внизу, как показано на этом сайте.
main
? Наиболее быстрый способ вам помочь это когда будет оформлен рабочий пример,html
иcss
добавьте черезФрагмент кода на JavaScript/HTML/CSS Ctrl-M