Обтекание страницы Outter не задано для высоты всей страницы.

У меня есть следующий код, который не покрывает полную высоту страницы, если страница имеет контент за пределами обычного порта просмотра (без прокрутки). Если я прокручу вниз внешние дисплеи div только немного, и это вернется к белому.Обтекание страницы Outter не задано для высоты всей страницы.

Почему внешний div не занимает всю высоту страницы, даже если требуется прокрутка?

html ,body { 
    height: 100%; 
    font-style: Helvetica; 
} 
.page_background, .page { margin: 0 auto; } 
.page_background { 
    width: 100%; 
    min-height: 100%; 
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#282828, #888888); /* Standard syntax */ 
    position: absolute; 
    /*height: 100%;*/ 
} 
.page { 
    background-color: #FFFFFF; 
    width: 85%; 
    min-height: 100%; 
    bottom: 0; 
    position: absolute; 
    height: 100%; 
    left: 7.5%; 
} 

     <div class="page_background"> 
      <div class="page"> 
      </div> 
     </div>

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

https://jsfiddle.net/1qwwtgjp/

источник

2015-08-17 Becky

проверка ответ ниже это хорошо – nifCody

возможно дубликат [обтекание не принимая мин-высота] (http://stackoverflow.com/questions/32032523/page-wrap-not-taking-min-height) – nifCody

Edit: Ваша главная проблема CSS позиционирование

Смотрите здесь: https://jsfiddle.net/1qwwtgjp/3/

Вы использовали position: absolute; в своих стилях, но ищет контент течи (и ваш фон с ним). Удалите все позиционирование absolute, в том числе left, bottom и т. Д., И явную высоту на вашем .page элементах, чтобы он мог протекать до любой высоты. Это добавит внешнюю оболочку вместе с ней.

Так что новые стили для вашего .page класса должны быть:

.page { 
    background-color: #FFF; 
    width: 85%; 
    min-height: 100%; 
    /** REMOVE THESE: **/ 
    /* left: 7.5%; */ 
    /* bottom: 0; */ 
    /* position: absolute; */ 
    /* height: 100%; */ 
}

Старый Ответ:

Если я правильно понимаю ваш вопрос, вы можете просто не знать о том, что браузеры, как правило, чтобы иметь маржи по умолчанию в теге <body>.

Просто добавьте стиль, чтобы удалить его:

html, body { margin:0; }

и посмотреть, если это решит проблему.

источник

2015-08-17 03:53:25

Нет, это не так. – Becky

Смотрите мое редактирование и дайте ему попробовать. Вот скрипка: https://jsfiddle.net/1qwwtgjp/1/ –

Когда я это сделал, это в основном сделало внешний div закрытым на всю страницу, а не только на левой и правой панели, как я ее установил, но когда я сделайте это ... '.page { \t background-color: #FFFFFF; \t ширина: 85%; \t нижний: 0; \t левый: 7.5%; \t/* мин-высота: 100%; */ \t позиция: абсолютная; \t/* height: 100%; */ } 'Внешний div расположен правильно, и я могу прокручивать. Тем не менее, это делает '.page' внутренний div, охватывающий мой navbar/header. – Becky

Вы можете это исправить, назначив overflow свойство hidden для внешней обертки дел.

.outerpagewrapperdiv{ 
    overflow:hidden; 
}

источник

2015-08-17 03:53:51

Это не то, что я хочу. Я хочу по-прежнему прокручивать. У меня много контента после точки прокрутки. Я просто хочу, чтобы внешний div больше появлялся после точки прокрутки – Becky

@Becky, то это из-за поля по умолчанию и заполнения элемента body. Вы можете сделать это с помощью 'body {margin: 0; padding: 0}' –

Я добавил, что и у меня тот же результат. У меня есть сброс страницы, это вообще испортит? – Becky

Обтекание страницы Outter не задано для высоты всей страницы.

ответ

Смежные вопросы