将页脚定位在网站页面的底部

时间：2012-12-26 20:14:47

标签： html css position

我正在尝试制作这个模板，我稍后将转换为WordPress主题。我遇到的问题类似于这篇文章：Make div stay at bottom of page's content all the time even when there are scrollbars但是当我尝试解决该帖子的解决方案时，却没有为我工作。

我想要的是页脚位于页面的最底部（如果内容比查看器的浏览器窗口长，则隐藏在视图中）并且没有将其固定在窗口的底部。

所有顶级内容（导航，栏，徽标等）都位于我希望的位置。但页脚和页脚上方的链接不位于页面的最底部。相反，当它首次加载时，它将自己定位在页面的底部。它拥有的内容越多，它就会停留在首次加载的区域。请参见下面的截图： footer stuck in the middle

以下是该页面的以下HTML / CSS：

HTML 

<div id="blackbar"></div>

    <div id="wrapper">

        <div id="redbar">
        <img src="images/logo_broeren_03.png" alt="" title="" />
        </div>

        <div id="navigationWrapper">
            <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Portfolio</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <div id="whitebar">
                <img src="images/logo_broeren_04.png" alt="" title="" />
            </div>
        </div>

        <div id="newsbar">
        </div>

        <div id="contentWrapper">

            <div id="secondaryNavigation">
            </div>

            <div id="slider-headline">
            </div>

            <div id="content">
                <div class="post">
                    <p>Contains post content</p>
                 </div>
            </div>

        </div>
    </div>



    <div id="footer">
    <span id="studioLink">designed by Two Eleven Studios</span>
        <ul>
            <li>602 N. Country Fair Drive, P.O. Box 6537 &#8226; Champaign, Illinois 61826&#8211;6537</li>
            <li>217&#8211;352&#8211;4232</li>
            <li>example@broerenrusso.com</li>
            <li>&copy; 2012 Broeren Russo Inc.</li>
        </ul>
    </div>

CSS 

/*General Implementations*/
body {
    background: #6CF;   
    width: 100%;
}

/*Main Elements*/
/*Black bar on the far left side*/
#blackbar {
        background: #000;
        height: 55px;
        position: absolute;
        top: 25px;
        /*width: 155px;*/
        width: 15%;
    }

/*Red bar containing red part image of logo*/
#redbar {
    background: #C0272D;
    width: 114px;
    height: 80px;
    float: left;
}
#redbar img {
    float: right;
    position: relative;
    top: 24px;
}

/*Wrapper containing main content, navigation,  white bar w/ logo, news feed, and main content*/
#wrapper {
    width: 798px;
    height: 100%;
    float: left;
    position: absolute;
    left: 15%;
    /*left: 155px;*/
}

/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper {
    width: 570px;
    height: 130px;
    position: relative;
    top: 0;
    float: left;
    font-size: 12px;
    font-family: 'RobotoLight', Arial, sans-serif;
    text-transform: uppercase;
}

/*Main navigation settings*/
#navigationWrapper ul {
    /*position: relative;
    top: 0;
    float: right;*/
    height: 24px;
    width: 570px;
}
#navigationWrapper ul li {
    display: inline-block;
    width: 114px;
    /*height: 22px;*/
    text-align: right;
    float: right;
    padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover { 
    border-top: 2px #C0272D solid;
    padding: 1px 0 0 0;
}
#navigationWrapper ul li a { 
    position: relative; 
    top: 10px;
    color: #000;
    text-decoration: none;
}

/*White bar w/ white logo*/
#whitebar {
    background: #FFF;
    height: 56px;
    width: 570px;
    position: relative;
    top: 0px;
}
#whitebar img { 
    float: left;
    position: absolute;
}

/*News feed on the side*/
#newsbar {
    width: 114px;
    height: 179px;
    background: #FFF;
    margin: 80px 0 0 0;
}

/*Slider/Headline Block and content block*/
#slider-headline, #content {
    width: 684px;
}
/*Slider/Headline Block*/
#slider-headline { 
    background: #000; 
    height: 302px;
}
/*content block*/
#content { 
    background: #FFF; 
    padding: 6.5em 0 1em 0;
    margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper {
    width: 684px;
    margin: -179px 0 24px 114px;    
}

/*Company tagline (only on index page)*/
#companyTagline {
    float: right;
    font-family: 'RobotoMedium', Arial, sans-serif;
    margin: 5px 0 0 0;
}

/*Secondary navigation within contentWrapper*/
#secondaryNavigation {
    width: 611px;
    height: 110px;
    margin: 0 auto;
    position: absolute; 
    background: #666;
    z-index: 10;
    top: 320px;
    right: 44px;
}

/*Post settings*/
.post {
    width: 89%;
    margin: 0 auto;
}

/*Studio link*/
#studioLink {
    position: absolute;
    bottom: 27px;
    left: 3px;
    font: 8px 'RobotoLight', Arial, sans-serif;
}

/*Main footer*/
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #CCC;
    height: 24px;
}
#footer ul {
    width: 684px;
    margin: 0 auto;
}
#footer ul li {
    list-style-image: none;
    display: inline-block;
    font: 9px/11px 'RobotoLight', Arial, sans-serif;
    margin: 0 23px 0 0;
}
#footer ul li:last { margin: 0; }

我知道问题的一部分是所有顶级内容（导航，顶部的白条等）都有position: absolute; CSS。但我想保留这个CSS声明。我如何拥有它，以便页脚上方的链接和页脚本身位于页面/内容的底部而不是位于窗口的底部？

5 个答案:

答案 0 :(得分：2)

所以在这里。由于绝对定位，花了很长时间

<body>
<div style="width:100%; min-height: 100%; position: relative; display:inline-block;">
    <div id="blackbar">
    </div>
    <div id="wrapper">
        <div id="redbar">
            <img src="images/logo_broeren_03.png" alt="" title="" />
        </div>
        <div id="navigationWrapper">
            <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Portfolio</a></li>
                <li><a href="#">Home</a></li>
            </ul>
            <div id="whitebar">
                <img src="images/logo_broeren_04.png" alt="" title="" />
            </div>
        </div>
        <div id="newsbar">
        </div>
        <div id="contentWrapper">
            <div id="secondaryNavigation">
            </div>
            <div id="slider-headline">
            </div>
            <div id="content">
                <div class="post">
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                    <p>
                        Contains post content</p>
                    <br />
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <span id="studioLink">designed by Two Eleven Studios</span>
        <ul>
            <li>602 N. Country Fair Drive, P.O. Box 6537  Champaign, Illinois 618266537</li>
            <li>2173524232</li>
            <li>example@broerenrusso.com</li>
            <li> 2012 Broeren Russo Inc.</li>
        </ul>
    </div>
</div>
 </body>

CSS 

  <style type="text/css">
    /*General Implementations*/
    html, body
    {
        background: #6CF;
        width: 100%;
        height: 100%;
    }

    /*Main Elements*/
    /*Black bar on the far left side*/
    #blackbar
    {
        background: #000;
        height: 55px;
        position: absolute;
        top: 25px; /*width: 155px;*/
        width: 15%;
    }

    /*Red bar containing red part image of logo*/
    #redbar
    {
        background: #C0272D;
        width: 114px;
        height: 80px;
        float: left;
    }
    #redbar img
    {
        float: right;
        position: relative;
        top: 24px;
    }

    /*Wrapper containing main content, navigation,  white bar w/ logo, news feed, and main content*/
    #wrapper
    {
        width: 798px;
        min-height: 100%;
        float: left;
        position: relative;
        left: 15%; /*left: 155px;*/
    }

    /*Navigation wrapper containing white bar w/ logo and main navigation*/
    #navigationWrapper
    {
        width: 570px;
        height: 130px;
        position: relative;
        top: 0;
        float: left;
        font-size: 12px;
        font-family: 'RobotoLight' , Arial, sans-serif;
        text-transform: uppercase;
    }

    /*Main navigation settings*/
    #navigationWrapper ul
    {
        /*position: relative;
top: 0;
float: right;*/
        height: 24px;
        width: 570px;
    }
    #navigationWrapper ul li
    {
        display: inline-block;
        width: 114px; /*height: 22px;*/
        text-align: right;
        float: right;
        padding: 3px 0 0 0;
    }
    #navigationWrapper ul li:hover
    {
        border-top: 2px #C0272D solid;
        padding: 1px 0 0 0;
    }
    #navigationWrapper ul li a
    {
        position: relative;
        top: 10px;
        color: #000;
        text-decoration: none;
    }

    /*White bar w/ white logo*/
    #whitebar
    {
        background: #FFF;
        height: 56px;
        width: 570px;
        position: relative;
        top: 0px;
    }
    #whitebar img
    {
        float: left;
        position: absolute;
    }

    /*News feed on the side*/
    #newsbar
    {
        width: 114px;
        height: 179px;
        background: #FFF;
        margin: 80px 0 0 0;
    }

    /*Slider/Headline Block and content block*/
    #slider-headline, #content
    {
        width: 684px;
    }
    /*Slider/Headline Block*/
    #slider-headline
    {
        background: #000;
        height: 302px;
    }
    /*content block*/
    #content
    {
        background: #FFF;
        padding: 6.5em 0 1em 0;
        margin: 0 0 1.5em 0;
    }
    /*wrapper containing slider/headline block and content block*/
    #contentWrapper
    {
        width: 684px;
        margin: -179px 0 24px 114px;
    }

    /*Company tagline (only on index page)*/
    #companyTagline
    {
        float: right;
        font-family: 'RobotoMedium' , Arial, sans-serif;
        margin: 5px 0 0 0;
    }

    /*Secondary navigation within contentWrapper*/
    #secondaryNavigation
    {
        width: 611px;
        height: 110px;
        margin: 0 auto;
        position: absolute;
        background: #666;
        z-index: 10;
        top: 320px;
        right: 44px;
    }

    /*Post settings*/
    .post
    {
        width: 89%;
        margin: 0 auto;
    }

    /*Studio link*/
    #studioLink
    {
        position: absolute;
        bottom: 27px;
        left: 3px;
        font: 8px 'RobotoLight' , Arial, sans-serif;
    }

    /*Main footer*/
    #footer
    {
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        background: #CCC;
        height: 24px;
    }
    #footer ul
    {
        width: 684px;
        margin: 0 auto;
    }
    #footer ul li
    {
        list-style-image: none;
        display: inline-block;
        font: 9px/11px 'RobotoLight' , Arial, sans-serif;
        margin: 0 23px 0 0;
    }
    #footer ul li:last
    {
        margin: 0;
    }
</style>

这是fiddle。适合我的工作。在Chrome和Firefox中查看。

答案 1 :(得分：1)

试试这个公式。匆匆

<div class="header">
</div>
<div id="Content">
<div class="con"></div>
</div>
<div class="header">
</div>

CSS 

html, body
{
height: 99%;
background-color:Black;
}
.header ,.footer
{
width: 960px;
height: 15%;
background-color:Gray;
}
#Content
{
min-height: 85%;
width: 960px;
background-color:Navy;
}
.con
{
min-height:900px;
width:960px;
background-color:Aqua;
}​

小提琴here

答案 2 :(得分：0)

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

<强> HTML 

        <div class="wrapper">
            <p>http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright &copy; 2008</p>
        </div>

<强> CSS 

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

答案 3 :(得分：-1)

将正文设置为height: 100%;和overflow: auto; 将页脚设置为position: fixed;，bottom: 0;和left: 0;

然后，您只能将内容的边距底部设置为页脚的高度。

答案 4 :(得分：-1)

将页脚的位置从绝对更改为固定：

#footer {
  position: fixed;
  ...
}
相关问题
最新问题