Question

我不太确定如何提出这个问题。我要做的是在页面底部有一个元素，它总是粘在底部，但如果页面太短，它将被页面上的其他元素向下推。

示例：

左侧中间图形和右侧标题都包含在#mainBodyContent中。如果浏览器窗口足够小，以至于这个div进入“最新的极客”闪存盒，我想要按下闪存盒。但是如果#mainBodyContent没有进入闪存盒，我希望闪存盒能够粘贴到当前位置的底部。我很困惑如何把它拉下来。

有任何建议/帮助吗？我有道理吗？

Answer 1

尝试使用CSS选择器position:fixed

Answer 2

您可以将绝对定位与填充结合使用。示例可以在这里看到：

Static Footer Example

<html>
<head>
<style type="text/css">
    html, body { height:100%; }

    /* layout */
    #container { 
        width:800px; margin: 0px auto; 
        position: relative; min-height: 100%; 
    }
    #top { height: 12px; } /* margin on header breaks liquid layout */
    #header { position: relative; }
    #content { padding-bottom: 72px; } /* 60px footer height plus 12px padding */
    #footer {
        clear: both;
        position:absolute;
        bottom: 0px;
        width:100%;
        height:60px;   
        text-transform: uppercase;
        background-color: red;
     }
    .section { 
        margin-top: 12px; 
        padding-top: 12px; 
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

</style>
</head>
<body>
    <div id="container">
        <div id="top"></div>    
        <div id="header">
            <h1>Title</h1>
        </div><!-- end header div -->

        <div id="content">

            <div class="section">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

        </div><!-- end content div -->

        <div id="footer">Footer content here</div>

    </div><!-- end container div -->
</body>

Answer 3

快速刺戳可以为您提供所需的大部分内容。关注（对我来说）是，当得到的页脚位于页面的底部时，上面的元素将在它下面运行。一些脚本可能会改变这种情况（很可能是在你的例子中完成的），但这是一个开始。

<html>
    <head>
        <style>
        #footer {
            position: fixed;
            bottom: 0px;
            background-color: Red;
            height: 200px;
        } 

        *html #footer {
            position: absolute;
            bottom: 0px;
            background-color: Red;
            height: 200px;
        }
        </style>
    </head>
    <body>
        <div>A test</div>
        <div id="footer">Here's my footer</div>
    </body>
</html>

Answer 4

将内容的高度与窗口的高度进行比较。如果窗口大于内容的高度，请将页脚设置为position: fixed; bottom: 0;。

的CSS：

#footer
{
    bottom: 0; /* this line does nothing until you set position: fixed; */
}

的javascript：

function setFooterPosition()
{
    var foot = document.getElementById("footer");
    var docEl = document.documentElement;
    foot.style.position = docEl.clientHeight < docEl.scrollHeight ? "" : "fixed";
}
window.onload = setFooterPosition;
window.onresize = setFooterPosition;

让div有一个最顶尖的位置？

4 个答案: