Блог

Главная - Вопросы по программированию - CSS не применяется при переполнении страницы

CSS не применяется при переполнении страницы

#html #css

#HTML #css

Вопрос:

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>title</title>

    <style>
        #div1 {
            position: absolute;
            top: 0px;
            left: 0px;
            min-width: 100%;
            width: auto;
            height: 100%;
            background: blue;
        }

        #div2 {
            position: absolute;
            top: 30%;
            left: 0px;
            width: 6000px;
            height: 300px;
            background: black;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

</html>

Например, на html-странице выше

Начальный просмотр

При прокрутке вправо

Я думал, что установка ширины div1 в значение auto будет соответствовать ширине div2, но это не работает. Я что-то упускаю? Нужно ли мне автоматически обновлять ширину с помощью javascript или это можно сделать только с помощью CSS?

Я хочу, чтобы он охватывал всю страницу, даже если размер страницы изменяется.

Комментарии:

1. Почему бы просто не установить внешний div шириной 6000 пикселей, а внутренний — шириной 100%?

2. Это всего лишь пример. Я хочу, чтобы он автоматически настраивался на случай, если я не знаю ширину дочерних элементов.

3. Вы хотите, чтобы он имел размер окна / страницы? Будьте более конкретными.

4. Я хочу, чтобы он охватывал всю страницу, даже если размер страницы изменяется.

5. Это все еще не ясно. Как вы хотите, чтобы 2 раздела отображались на странице?. То, что вы сделали сейчас, div2 перекрывает div1. Возможно, вы могли бы создать изображение того, что вы хотите, это помогло бы.

Ответ №1:

Установите position: relative on #div2 , #div1 затем будет расширяться вместе с ним:

 #div1 {
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 100%;
    width: auto;
    height: 100%;
    background: blue;
}

#div2 {
    position: relative;
    top: 30%;
    left: 0px;
    width: 6000px;
    height: 300px;
    background: black;
}  
 <div id="div1">
  <div id="div2"></div>
</div>

Комментарии:

1. Спасибо, это сработало. Не могу поверить, что я не додумался до чего-то настолько простого. Я собираюсь пометить этот ответ как принятый, когда смогу.