HTML/CSS - Проблемы с липким нижним колонтитулом

Мне кажется, что мне стыдно, что я должен опубликовать этот вопрос здесь. На моей веб-странице есть нижний колонтитул, который я хочу оставить внизу, когда я добавляю контент, я хочу, чтобы нижний колонтитул просто двигался вниз.HTML/CSS - Проблемы с липким нижним колонтитулом

Я пробовал несколько решений, которые были доступны через stackoverflow, к сожалению, к сожалению.

TL; DR Sticky Footer, который прилипает в нижней

Мой HTML Структура:

<html> 
<head></head> 
<body> 
    <div id="pageWrap"> 
     <nav></nav> 
     <div id="contentWrap"> 
      <div id="contentHeader">some text</div> 
      <div id="content"> 
       <!-- Content --> 
      </div> 
     </div> 
    </div> 
    <footer></footer> 
</body>

Вот странная вещь: Когда я использую инспектировать функцию элемента я замечаю, мой рост pagewrap является 182px , Мои divs внутри pagewarp имеют гораздо больший контент, чем 182px, и я даже не устанавливаю высоту.

В основном элементы внутри pagewrap попадающих вне в рамках этой обертки. Я чувствую, что это закручивает верхний этаж.

EDIT:

Соответствующий CSS:

html, body { height: 100%; } 
#contentWrap{ width: 90%; margin: 0 auto; word-wrap: break-word } 
#content{ margin-top: 30px;} 
footer{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #EDEDED; 
    border-top: 1px solid #D6D6D6; 
}

источник

2016-04-29 Dubb

Вы также должны опубликовать свой css. – sweaver2112

Что происходит, когда вы используете позицию: фиксируется для элемента нижнего колонтитула? –

@ sweaver2112 Я обновил вопрос :) – Dubb

Попробуйте плавающей #pagewrap или добавить overflow:hidden. Это позволяет понять содержание элемента, которое может привести к его масштабированию. Это все, о чем я могу думать, не видя ничего демонстрационного.

Вы также должны убедиться, что элементы внутри #pagewrap установлены на position:relative, если вы хотите, чтобы они масштабировались #pagewrap.

источник

2016-04-29 13:06:24 cpalinckx

HTML/CSS - Проблемы с липким нижним колонтитулом

ответ

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