проблема реализации липкого нижнего колонтитула CSS с макетом жидкость / жидкость - PullRequest
Новая
       3

проблема реализации липкого нижнего колонтитула CSS с макетом жидкость / жидкость

2 голосов
/ 02 августа 2011

Я пытаюсь реализовать метод CSS Sticky Footer, как показано на cssstickyfooter.com . (Я также пробовал решение Райана Фейта , но безрезультатно).

Я следил за всем до т, или, по крайней мере, я думаю, что у меня есть. У меня есть контейнер div (они называют это wrap), панель логотипа (они называют это заголовком) и страница div (они называют это main), тогда у меня есть мой нижний колонтитул.

Так вот в чем проблема, если у меня включен overflow:auto, тогда я получу очень короткую div и полосу прокрутки (хрен). Но если я закомментирую все мои показы контента, но страница все равно будет считать, что div имеет такой же размер, как если бы overflow:auto не был закомментирован.

В остальном он работает так же, как и должен. Нижний колонтитул остается внизу и при изменении размера останавливается на короткой странице / main div. Есть ли способ получить его до конца моего контента? Я должен отметить, что я не могу использовать фиксированную высоту для своей страницы / main div, потому что мне нужно, чтобы она меняла размер в зависимости от размера div, который он содержит (какой бы он ни был виден в данный момент). *

Это может быть или не быть нижним колонтитулом, вызывающим проблему, так или иначе, я мог бы использовать некоторую помощь, чтобы выяснить это.

HTML: 

<body>
<div id="container">
    <div id="logo"> 

        <div id="home-flower"></div><!-- end home-flower -->
        <div id="about-flower"></div><!-- end about-flower -->
        <div id="proof-flower"></div><!-- end proof-flower -->
        <div id="contact-flower" ></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div id="page">
        <div id="spacer"><br/></div><!-- end spacer -->
        <div id="home">home</div><!-- end home -->
        <div id="about">about</div><!-- end about -->
        <div id="proof">proof of concept</div><!-- end proof -->
        <div id="contact">contact</div><!-- end contact --> 
    </div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>

CSS: 

* {
    margin:0px auto !important;
}

html, body {
    height:100%;    
}

#container {
    width:800px;
    background-color:#F0F;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#page{
    width:100%;
    min-height:100%;
    position:relative;
    background-color:#F00;
    padding-bottom:75px;
    /*overflow:auto;*/
}

#logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#footer {
    position:relative;
    margin-top:-75px;
    width:800px;
    height:75px;
    background-color:#C0F;
    clear:both;
}

#spacer {
    position:relative;
    line-height:20px;
}

Ответы [ 2 ]

0 голосов
/ 03 августа 2011

Похоже, мне нужно было изменить положение делений #home, #about, #proof и #contact на относительные, а не абсолютные, как у меня. Однако, как только я это сделаю, они больше не будут сложены друг на друга. Любые идеи о том, как сделать относительно позиционированные div, имеют одинаковую (x, y) позицию, чтобы они были прямо друг над другом? У меня top и left установлены на 0px для каждого div, но они просто наслаивают себя, а не укладывают ... если это имеет смысл.

0 голосов
/ 02 августа 2011

Как насчет использования 

<div id="footer">
  This is footer text
</div><!-- end footer -->

и css as 

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

Нижний колонтитул придерживается нижней части страницы.

Это то, что вы ищете.

...