个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 18:31:54 26 4
gpt4 key购买 nike

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

我想要的是页脚位于页面的最底部(如果内容比查看者的浏览器窗口长，则从 View 中隐藏)而不是固定在窗口底部。

所有顶部内容(导航、栏、 Logo 等)都位于我希望的位置。但是页脚上方的链接和页脚并未位于页面的最底部。相反，当它第一次加载时，它会将自己定位在页面底部。它拥有的内容越多，它就会停留在最初加载的区域。请参见下面的屏幕截图: 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 声明。如何让页脚上方的链接和页脚本身位于页面/内容的底部而不是位于窗口的底部？

最佳答案

原来如此。因为绝对定位所以用了很久

<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 中检查过。

关于html - 将页脚定位在网站页面的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14045730/

26 4 0
文章推荐： ios - 自动调整 UITableViewCell : change height of a view inside a custom cell
文章推荐： javascript - Ember js - 如何在激活路由时触发 Controller 操作
文章推荐： python - 如何使用时间序列数据在 ggplot 中绘制面积图？
文章推荐： javascript - "all"事件的一个好的用例是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com