<!-- Other divs --> </div> </body> И мой CSS html, body { "> <!-- Other divs --> </div> </body> И мой CSS html, body { "> <!-- Other divs --> </div> </body> И мой CSS html, body { " />

Отрегулируйте фоновый контейнер на высоту страницы, а не высоту экрана.

Моя проблема в том, что мой фоновый контейнер отображается только до нижней части экрана. После этого я не вижу этого в этой части. Я пробовал почти все, но ничего не работает для меня. Я хочу, чтобы он был скорректирован в соответствии с размером страницы.

<body>
<div id="profilebg">

<!-- Other divs -->

</div>
</body>

И мой CSS

html, body {
    height:100%;
}

#profilebg
{
    position: absolute;
    margin-left:10%;
    margin-right:10%;
    width:80%;
    background-color:#ffffff;
    height: 100%;
    top: 0;
    bottom: 0;
    display: block;
}
3
nl ja de
Если #profilebg - ваш фоновый контейнер, почему вы используете абсолютное позиционирование?
добавлено автор Diodeus - James MacFarlane, источник
Я согласен, я лично стараюсь избегать абсолютного позиционирования, где это возможно. Пожалуйста, см. Мой ответ на редактирование со второй скрипкой, используя относительное позиционирование.
добавлено автор dev, источник
Удалите позицию : absolute; , height: 100%; , top: 0; и внизу: 0;
добавлено автор renab, источник
Я пробовал, не используя абсолютное позиционирование, но это тоже не работает. Пробовал много вещей, читал много статей, и там где-то я читал это так, подумал, чтобы попробовать.
добавлено автор linpar, источник

2 ответы

Если вы не укажете высоту, по умолчанию будет установлено значение «авто», которое определяется высотой содержимого.

Если вы что-то плаваете внутри содержимого, обязательно добавьте элемент ccs style clear: both , чтобы родитель мог правильно определить его высоту.

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

Образец рабочего стиля:

html, body {
  height:100%;
}

#profilebg
{
    margin: 0 10%;
    background-color:#ffffff;
}

Edit: More concise CSS styles - width is redundant with margins

Edit 2: Add line about absolute positioning

Edit 3: Div structure to achieve request in below comments:

<div id="page-container">
    <div id="header-container">
        <!-- Put your header here -->
    </div>
    <div id="body-container">
        <div id="profilebg">
            <!-- Profile BG Container -->
        </div>
        <!-- Any other body content here -->
    </div>
    <div id="footer-container">
        <!-- Footer content here -->
    </div>
</div>
2
добавлено
@linpar Вот что это за сайт.
добавлено автор renab, источник
@linpar См. «Редактировать 3» для получения информации о том, как выполнить свой запрос
добавлено автор renab, источник
Родитель не может определить его высоту, когда у него есть дети с абсолютным позиционированием, поскольку абсолютное позиционирование выводит его из области родительского
добавлено автор renab, источник
@linpar, если вы дадите нам представление о том, что вы пытаетесь сделать с абсолютным позиционированием некоторых элементов, решение, которое будет работать для вас, возможно
добавлено автор renab, источник
@linpar Вы хотите, чтобы нижний колонтитул всегда был на странице, но внизу или всегда внизу вашего контента (прокрутите вниз, чтобы увидеть нижний колонтитул)?
добавлено автор renab, источник
Он работает, если я удаляю все абсолютные позиционированные divs из моего контейнера. Любая идея, в чем причина?
добавлено автор linpar, источник
Большое вам спасибо за помощь. Я очень ценю это.
добавлено автор linpar, источник
Я хочу, чтобы мой нижний колонтитул всегда находился внизу контента. Но если содержимое не заполняет страницу (не прокручивается), я хочу, чтобы она была внизу страницы, оставляя некоторое количество содержимого между контентом и нижним колонтитулом.
добавлено автор linpar, источник
На самом деле я не очень хорошо разбираюсь в CSS, поэтому для позиционирования моих divs я использовал абсолютный, поскольку он довольно прямолинейный. Теперь еще одна вещь, если вы можете мне помочь. Я хочу, чтобы мой нижний колонтитул встал в нижней части страницы, поэтому я должен использовать верх: 100%, нижний: 0% с абсолютным позиционированием или есть ли другой лучший метод?
добавлено автор linpar, источник

Кажется, что ниже работает то, чего вы хотите достичь. Я удалил внизу: 0; и изменил height на min-height .

html, body {   
    height:100%; 
}

#profilebg {
    position: absolute;
    margin-left:10%;
    margin-right:10%;
    width:80%;   
    min-height:100%;
    background-color:#ffffff;
    top: 0;
    display: block;   
}

EDIT Here is a fiddle

EDIT 2 Here is a fiddle with relative positioning.

0
добавлено
Если вы используете абсолютное позиционирование для всего, содержащегося в #profilebg , тогда он не сможет обработать начальную высоту.
добавлено автор dev, источник
Я использую абсолютное позиционирование для некоторых контейнеров, присутствующих в #profilebg. Я пробовал относительное позиционирование, но это также не работает.
добавлено автор linpar, источник
Думаю, это не работает с моими другими div. Я пробовал теги

и работал с ними.

добавлено автор linpar, источник
Спасибо за ваш ответ, но он также не работает.
добавлено автор linpar, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)