Попытка получить .footer оставаться в самом низу страницы

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

<html> 
    <body> 
    <div class="container"> 
     <div class="socialmedia"></div> 
     <div class="navbar"></div> 
     <div class="mainbody></div> 
     <div class="footer"></div> 
    </div> 
    </body> 
</html>

Я пытался чтобы мой нижний колонтитул остался внизу моей веб-страницы, ниже. Проблема, однако, заключается в том, что нижний колонтитул, кажется, сидит внизу моего окна, а не внизу веб-страницы, которая может быть значительно ниже моего фактического окна, когда у меня много контента. Прямо сейчас, у меня есть все установленные выше div, чтобы установить «абсолютное»; а также HTML и тело оформлены следующим образом:

html, body{ 
height:100%; 
margin:0; 
padding:0; 
} 
html { background: url(/img/multiblock.png)repeat center center fixed; }

}

Теперь, единственный способ, которым я могу получить свой подвал, чтобы оставаться в нижней части страницы, чтобы установить верхний: -3998px (или независимо от высоты моего самого большого окна). Очевидно, что это не сработает, если на веб-странице будет достаточно контента, чтобы расширить его за эту высоту. Если я устанавливаю позицию в относительную, она отображается в верхней части всей моей веб-страницы, и когда она абсолютная, она появляется только в нижней части окна просмотра. Вы можете проверить сайт на http://www.edmuncovered.com, чтобы узнать, что я имею в виду или проверить остальную часть кода. Части моего сайта включают добавление контента каждый день или около того, поэтому я хочу, чтобы веб-страница могла увеличиваться по высоте с добавленным контентом, но форматирование остается прежним, а нижний колонтитул, очевидно, остается внизу. Есть идеи?

источник

2013-06-04 user2325723

Я думаю, это то, что вам нужно ...

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>

CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

источник

2013-06-04 16:29:50 rousseauo

Благодаря rousseauo ... Я в конечном итоге выяснить, что я должен был избавиться от почти всех моих Дивых-й лет их позиционирования и работы с нуля чтобы найти то, что действительно нужно, чтобы быть абсолютным (в конечном итоге только нижний колонтитул, оставив остальных как статичные или относительные), и он работает сейчас! – user2325723

Вы можете попробовать что-то вроде этого:

CSS:

.socialmedia, .navbar, .mainbody, .footer 
{ 
border: 1px solid grey; 
margin-top: 5px; 
width: 800px; 
} 
.socialmedia 
{ 
height: 20px; 
} 
.mainbody 
{ 
min-height: 980px; 
} 
.footer 
{ 
height: 25px; 
}

Html:

<div class="container"> 
    <div class="socialmedia">Social Media</div> 
    <div class="navbar">Navbar</div> 
    <div class="mainbody">Mainbody</div> 
    <div class="footer">Footer</div> 
</div>

Рабочая jsFiddle:http://jsfiddle.net/LrfXr/

источник

2013-06-04 16:53:58 Gimmy

Вы можете установить '.mainbody {min-height: 980px;}' на минимальную высоту, которую вы хотите – Gimmy

Я буду считать, что это вопросы, подобные той, здесь: How to Stop Sticky Footer at Content DIV

На что есть несколько хороших ответов.

Ссылка на этой странице:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html

В основном вы ищете колонтитул, который прикрепляется к нижней части окна просмотра, но распространяется также должно содержанию нажать его видовой экран. У Мартина Бин и Райана Файта есть лучшие методы. Метод бутстрапа также является вариацией этого метода.

Счастливые охоты.

источник

2013-06-04 18:00:13 darcher

Адрес jsFiddle.Подписок ваш CSS и HTML код:

HTML код

<div class="container"> 
     <div class="socialmedia">Social Media</div> 
     <div class="navbar">Navbar</div> 
    <div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div> 
     <div class="footer">Footer</div> 
    </div>

CSS

*{ 
margin:0; 
padding:0; 
} 
body { 
    background-color:#E4E2E2; 
    color:#fff; 
} 
.container { 
    min-height:100%; 
    /*position:relative;*/ 
} 
.socialmedia { 
    background-color:#186301; 
    padding:10px; 
} 
.navbar { 
    background:#A60206; 
    padding:10px; 
    min-height:30px; 
} 
.mainbody { 
    padding:20px; 
    background-color:#6D0594; 
} 
.footer { 
    position:absolute; 
    bottom:0; 
    padding:2%; 
    background-color:#000; 
    width:96%; 
}

источник

2013-06-05 07:19:37

Это работает для меня: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Короче говоря, используйте этот :

CSS

* { 
    margin: 0; 
} 
    html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
} 
.footer, .push { 
    height: 4em; 
}

HTML

<html> 
    <head> 
     <link rel="stylesheet" href="layout.css" ... /> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <p>Your website content here.</p> 
      <div class="push"></div> 
     </div> 
     <div class="footer"> 
      <p>Copyright (c) 2008</p> 
     </div> 
    </body> </html>

источник

2013-06-07 07:14:31

Попытка получить .footer оставаться в самом низу страницы

ответ

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