Липкий нижний колонтитул CSS - PullRequest
0 голосов
/ 28 апреля 2011

У меня довольно простой сайт (верхний колонтитул, контент, нижний колонтитул без боковых панелей или что-то еще), проблема в том, что область контента перекрывает нижний колонтитул. Я перепробовал все исправления липкого нижнего колонтитула (например, csstricks, ryanfait.com и несколько других, которые я нашел в Google и некоторые здесь, и ни одна из них не работает

Как обычно, любая помощь приветствуется

    <body>
     <div class="wrapper">


            <div id="header">
            </div>

            <div id="content">      
            </div>

            <div id="push">
            </div>

     </div>

     <div id="footer">
     </div>

</body>



    * {
margin: 0;
}

html, body {
height: 100%;
}



#header{
    background-image:url("Images/nav.jpg");
    width:100%;
    height:64px;
}

#content{
    background:#ffffff;
    height:592px;
    width:798px;
    position:absolute;
    top:80px;
    left:20%;
    z-index:3;
    -moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -129px;
}

#footer, #push {
height: 129px;
}

#footer{
    background-color:#292929;
    width:100%;
}

Ответы [ 3 ]

2 голосов
/ 28 апреля 2011

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

#footer {
 position: fixed;
 bottom: 0;
 height: 80px; 
}

http://jsfiddle.net/JyQxW/

0 голосов
/ 28 апреля 2011

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

<div style="clear:both"></div> <!-- add this line just above your div footer -->
<div id="footer">
0 голосов
/ 28 апреля 2011

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

Чтобы сохранитьсодержимое переполнено, перемещается #content влево или вправо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...