элемент html с атрибутом высоты 100% не покрывает все окно

-1

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

это мой CSS:

html { 
    height: 100%; 
    box-sizing: border-box; 
} 
*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 
body{ 
    position: relative; 
    font-size: 10px; 
    font-family: Arial, Helvetica, sans-serif; 
    min-height: 100%; 
    padding-bottom: 40px; 
    margin: 0; 
} 
#footer{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin-left: 16%; 
    margin-right: 16%; 
    font-size: 11px; 
    margin-top: 20px; 
    margin-bottom: 15px; 
    width: 68%; 
}

HTML структура:

<!DOCTYPE html> 
<html lang="nl"> 
    <body> 
      <nav> 
       .... 
      </nav> 
      <div id="content"> 
       .... 
      </div> 
      <div id="footer"> 
       .... 
      </div> 
    </body> 
</html>

Изображения:

the footer at the bottem of the window

when I scroll down

Есть ли кто-нибудь, кто может мне помочь?

благодарим вас заранее!

источник

2016-10-20 Mathies Gielen

Пожалуйста отправьте соответствующий HTML. 'height: 100%' означает, что элемент будет на 100% от его родителя. Установив высоту 100% на ваш 'html', вы можете установить высоту HTML в высоту вашего окна. Возможно, именно поэтому абсолютная позиция будет использовать положение окна вместо тела. Опять же, не могу быть уверен без HTML. – Santi

Я отредактировал сообщение –

Должно быть что-то еще, потому что ваш код работает нормально с этим примером. Вы используете iframes? Пожалуйста, попробуйте поставить фрагмент

Кроме того, если у вас есть элемент с float позиционирования следует положить <div style='clear:both> `перед #footer DIV, плавающие элементы могут сделать много странных вещей, если вы не ясно.

html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body{ 
 
    position: relative; 
 
    font-size: 10px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    min-height: 100%; 
 
    padding-bottom: 40px; 
 
    margin: 0; 
 
} 
 
#footer{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin-left: 16%; 
 
    margin-right: 16%; 
 
    font-size: 11px; 
 
    margin-top: 20px; 
 
    margin-bottom: 15px; 
 
    width: 68%; 
 
}

<html> 
 
    <body> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    <div id="footer"> footer</div> 
 
    </body> 
 
    </html>

источник

2016-10-20 14:13:41

Вот удивительный способ воткнуть колонтитула в нижней части страницы, без использования высоты: 100%.

.Site { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.Site-content { 
 
    flex: 1; 
 
}

<body class="Site"> 
 
    <header>header stuff!</header> 
 
    <main class="Site-content">Main Content stuff</main> 
 
    <footer>footer stuff!</footer> 
 
</body>

источник

2016-10-20 14:18:08

элемент html с атрибутом высоты 100% не покрывает все окно

ответ

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