Прокрутка контента мимо нижнего колонтитула - PullRequest
Новая
       3

Прокрутка контента мимо нижнего колонтитула

0 голосов
/ 27 ноября 2009

В моем макете страницы нижний колонтитул остается таким, какой он есть, и содержимое прокручивается за нижним колонтитулом. Есть ли способ сохранить нижний колонтитул в нижней части содержимого? Вы можете посмотреть, как выглядит страница, посетив www.postcode53.com / layout.

HTML и CSS следующие:

HTML Жилищные партнеры 

        <div id="header-navigation">
            <ul>
                <li><a href="#">About Zach</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>



    </div>

    <div class="menu">
        <div class="menu-navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Demo</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Sign UP!</a></li>
            </ul>
        </div>

    </div>

    <div id="image">
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
        Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    </div>

    <div class="menu">
        <div class="menu-navigation">
            <ul id="menulist">
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>

            </ul>
        </div>

    <div id="maincontent">

        <img src="data.jpg"></img>

        <div id="extra">
            <div id="newsletters">
                <div id="title"><h2>LazyZach Newsletters</h2></div>
            </div>

            <div id="navigation">
                <div id="title"><h2>Navigation</h2></div> 
                <ul id="extra-navigation">
                    <li>Home</li>
                    <li>Features</li>
                    <li>Demo</li>
                    <li>FAQ</li>
                    <li>Sign Up</li>
                    <li>About Zach</li>
                    <li>Contact</li>
                </ul>
            </div>

            <div id="boring-stuff">
                <div id="title"><h2>Boring Stuff</h2></div>
                <ul id="extra-navigation">
                    <li>Terms Of Use</li>
                    <li>Privacy Policy</li>
                    <li>Copyright Policy</li>
                    <li>Removal Notice</li>
                    <li>Partnet With Us</li>
                    <li>Abuse Desk</li>
                    <li>Contact Us</li>
                    <li>Sitemap</li>
                </ul>
            </div>

            <div id="overheard">
                <div id="title"><h2>Overheard on Twitter</h2></div>
            </div>
        </div>

    </div>
    <div id="footer">
        <center>LAZYZACH IS CREATED BY XYZ GROUP &copy; 2009. ALL RIGHTS RESERVED</center>
    </div>


</body>

CSS 

#header {
    margin:0 auto;
    overflow:hidden;
    padding:-5px 0;
    width:100%;
    background:#000000;

}

#banner {
    padding-left:35px;
}

#header-navigation {
    float:right;
    color:#ffffff;
    font-weight:bold;
    margin:0 80px 0 0;
    padding-right:20px;
    width:250px;


}
#header-navigation a {
    color:#C0C0C0;
    text-decoration:none;
}

#header-navigation ul li {
    display: inline;
    padding-right:8px;

} 

.menu {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#CCCCCC;
}



.menu-navigation {
    color:#ffffff;
    font-weight:bold;
    padding-left:0px;
}
.menu-navigation a {
    color:#666666;
    text-decoration:none;
}

.menu-navigation ul li {
    display: inline;
    padding-right:14px;

} 

#menulist li {
    padding-right:250px;
}

#menulist{
    padding-right:34px;
}

#image {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#ABDB2A;
    color:#FFFFFF;
    font-weight:bold;
}

#maincontent {
    background:white;
    position:absolute;

}

#extra {
    position:absolute;
    margin:0 auto;
    padding-right:30px;
    padding:1px;
    width:1335px;
    background:#AADB2C;
    color:#000000;
    font-weight:bold;
    border:1px solid;

}

#newsletters {
    float:left;
    margin-right:250px;




}

#navigation {
    float:left;
    margin-right:70px;


}

#boring-stuff {
    float:left;
    margin-right:70px;
}

#footer {
    background:#ffffff;
    position:fixed;
    bottom:0px;
    margin-top:10px;
    left:0;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#666666;

}

#extra-navigation {
    list-style-type:none;
    padding-left:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin-top:-15px;
;


}

#extra-navigation li {
        margin-bottom:.5em;
}


#newsletters #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left:100px;





}


#navigation #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}




#boring-stuff #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


#overheard {
    margin-left:600px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

Пожалуйста, помогите. Спасибо.

Ответы [ 2 ]

1 голос
/ 27 ноября 2009

MARKUP

Я закончил смотреть на это. Полностью исправленная разметка, многие отсутствовали, поэтому я угадываю, что ваш php или что-то, что вы используете на бэкэнде, облажалось: 

<div id="header">
    <img id="banner" src="HousingPartners.jpg">

    <div id="header-navigation">
        <ul>
            <li><a href="#">About Zach</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

<div class="menu">
    <div class="menu-navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Demo</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Sign UP!</a></li>
        </ul>
    </div>
</div>

<div id="image">
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</div>

<div class="menu">
    <div class="menu-navigation">
        <ul id="menulist">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
        </ul>
    </div>
</div>

<div id="maincontent">
    <img src="data.jpg">
</div>

<div id="extra">
    <div id="newsletters">
        <div id="title"><h2>LazyZach Newsletters</h2></div>
    </div>
    <div id="navigation">
        <div id="title"><h2>Navigation</h2></div>
        <ul id="extra-navigation">
            <li>Home</li>
            <li>Features</li>
            <li>Demo</li>
            <li>FAQ</li>
            <li>Sign Up</li>
            <li>About Zach</li>
            <li>Contact</li>
        </ul>
    </div>
    <div id="boring-stuff">
        <div id="title"><h2>Boring Stuff</h2></div>
        <ul id="extra-navigation">
            <li>Terms Of Use</li>
            <li>Privacy Policy</li>
            <li>Copyright Policy</li>
            <li>Removal Notice</li>
            <li>Partnet With Us</li>
            <li>Abuse Desk</li>
            <li>Contact Us</li>
            <li>Sitemap</li>
        </ul>
    </div>
    <div id="overheard">
        <div id="title"><h2>Overheard on Twitter</h2></div>
    </div>
    <div class="clear-all" style="clear: both; height: 0px;">&nbsp;</div>
</div>


<div id="footer">
    LAZYZACH IS CREATED BY XYZ GROUP © 2009. ALL RIGHTS RESERVED
</div>

ВНИМАНИЕ :

В приведенной выше разметке я добавил дополнительную строку внутри div , которая называется extra : 

    <div class="clear-all" style="clear: both; height: 0px;">&nbsp;</div>

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

CSS

Много ошибок в CSS тоже. Похоже, это было сгенерировано прерванным ребенком Dreamweaver и Frontpage. Рабочий CSS: 

#header {
    margin:0 auto;
    overflow:hidden;
    padding:-5px 0;
    width:100%;
    background:#000000;

}

#banner {
    padding-left:35px;
}

#header-navigation {
    float:right;
    color:#ffffff;
    font-weight:bold;
    margin:0 80px 0 0;
    padding-right:20px;
    width:250px;
}

#header-navigation a {
    color:#C0C0C0;
    text-decoration:none;
}

#header-navigation ul li {
    display: inline;
    padding-right:8px;

}

.menu {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#CCCCCC;
}



.menu-navigation {
    color:#ffffff;
    font-weight:bold;
    padding-left:0px;
}
.menu-navigation a {
    color:#666666;
    text-decoration:none;
}

.menu-navigation ul li {
    display: inline;
    padding-right:14px;

}

#menulist li {
    padding-right:250px;
}

#menulist{
    padding-right:34px;
}

#image {
    margin:0 auto;
    padding-right:10px;
    padding:1px;
    width:100%;
    background:#ABDB2A;
    color:#FFFFFF;
    font-weight:bold;
}

#maincontent {
    background:white;
}

#extra {
    margin:0 auto;
    padding-right:30px;
    padding:1px;
    width:1335px;
    background:#AADB2C;
    color:#000000;
    font-weight:bold;
    border:1px solid;

}

#newsletters {
    float:left;
    margin-right:250px;
}

#navigation {
    float:left;
    margin-right:70px;
}

#boring-stuff {
    float:left;
    margin-right:70px;
}

#footer {
    background:#ffffff;
    bottom:0px;
    margin-top:10px;
    left:0;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#666666;
    text-align: center;
}

#extra-navigation {
    list-style-type:none;
    padding-left:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin-top:-15px;
}

#extra-navigation li {
    margin-bottom:.5em;
}


#newsletters #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:0px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    margin-left:100px;
}


#navigation #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

#boring-stuff #title {
    /*border-bottom:1px solid;*/
    text-decoration:underline;
    padding-bottom:5px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


#overheard {
    margin-left:600px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;

}

Все это должно дать вам что-то близкое к тому, что вы пытались сделать. Я надеюсь, что это будет полезно для вас.

1 голос
/ 27 ноября 2009

Если вы хотите, чтобы нижний колонтитул был в нижней части содержимого, вам необходимо серьезно изменить структуру макета. Некоторые элементы макета теперь используют 

position: absolute;

Вот почему практически невозможно закрепить нижний колонтитул до конца содержимого. Это возможно только в том случае, если вы сделаете все элементы макета фиксированной высоты и рассчитаете требуемую позицию нижнего колонтитула.

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

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

Нет похожих вопросов

...