Не листается страница в браузере

Question

Не листается страница в браузере

Рейтинг: 0Ответов: 1Опубликовано: 21.06.2023

В рамках учебного проекта нужно написать сайт, но есть некая проблема: не скроллится страница. Контент, расположенный ниже стандартного положения, не доступен.

HTML:

<html lang="ru">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet"> <!--Обычный шрифт (лого)-->
        <link href="css//index_style.css" rel="stylesheet">
    </head>
    <body>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Главная</title>
        <div class="video_background">
            <video autoplay muted loop id="myVideo">
                <source src="src/Motionless In White - _c0de [LIVE MUSIC VIDEO].mp4" type="video/mp4">
            </video>
        </div>
        <div class="content">
            <header class="main_head">
                <div class="navigation">
                    <button class="navigation_button">Новости</button>
                    <button class="navigation_button">Туры</button>
                    <button class="navigation_button">Состав</button>
                    <button class="navigation_button">Медиа</button>
                </div>
            </header>
        </div>
        <div class="news">
            <div class="upper_panel">
                <div class="upper_panel_text">Новинки:</div>
                <div class="news_1">
                    <img class="news_image_1" src="src/MIWScoringTheEndOfTheWorld.jpg">
                    <div class="news_text_1">Scoring the End of the World — шестой студийный альбом американской метал-группы Motionless in White, выпущенный 10 июня 2022 года на лейбле Roadrunner Records.</div>
                </div>
                <div class="news_2">
                    <img class="news_image_2" src="src/DisguiseMIWcover.jpg">
                    <div class="news_text_2">Disguise — пятый студийный альбом американской метал-группы Motionless in White, выпущенный 7 июня 2019 года. Является первым альбомом группы, в записи которого участвовал бывший гитарист Ice Nine Kills Джастин Морроу, заменивший Девина «Ghost» Солу, и не принимал участие клавишник Джош Болз.</div>
                </div>
                </div>
            </div>
        </div>
        <div class="subnews">
            a
        </div>
    </body>
</html>

CSS:


a{
    text-decoration: none;
    color: #ffffff;
}

body{
    overflow-y: scroll;
}

.main_head{
    margin-top: 0%;
    font-family: "MS Sans Serif";
}

.navigation_button{
    margin-left: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    font-size: 24px;
    border: none;
    background-color: #000;
    color: #fff;
}

.navigation_button:hover{
    opacity: 100%;
    background-color: #ddd;
    color: black;
}

#myVideo{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.content{
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    top: 45%;
}

.news{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 90%;
    top: 55%;
    height: 25%;
    margin-left: 5%;
}

.upper_panel{
    margin-top: 5%;
    margin-bottom: 2.5%;
    margin-left: 3%;
}

.upper_panel_text{
    position: fixed;
    font-size: 24px;
    margin-top: 1%;
    margin-left: 2%;
}

.news_1{
    position: relative;
    left: 7.5%;
    margin-right: 60%;
}

.news_image_1{
    border: 3px;
    margin-left: 15%;
    margin-top: -7%;
    width: 30%;
}

.news_text_1{
    position: absolute;
    top: -30%;
    left: 50%;
    text-align: justify;
    margin-right: 20%;
}

.news_2{
    position: relative;
    left: 45%;
    margin-right: 50%;
    margin-top: -1.5%;
}

.news_image_2{
    border: 3px;
    margin-left: 15%;
    margin-top: -25%;
    top: -10%;
    width: 25%;
}

.news_text_2{
    position: absolute;
    top: 0%;
    margin-top: -25.5%;
    left: 45%;
    text-align: justify;
    margin-right: 20%;
}

.subnews{
    position: fixed;
    background-color: red;
    width: 80%;
    top: 100%;
}```

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Проблема была в position: fixed. Смена значения этого параметра на absolute решила проблему

Не листается страница в браузере

Ответы