HTML/CSS将DIV与页面和屏幕底部对齐-以先到者为准_Html_Css_Dom_Position

HTML/CSS将DIV与页面和屏幕底部对齐-以先到者为准

html css dom

HTML/CSS将DIV与页面和屏幕底部对齐-以先到者为准,html,css,dom,position,Html,Css,Dom,Position,我有一个部门： clear:both; position:absolute; bottom:0; left:0; background:red; width:100%; height:200px; 和html，正文： html, body { height:100%; width:100%; } /* Body styles */ body { background:url(../images/background.png) top center no-repeat

我有一个部门：

clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

和html，正文：

html, body {
    height:100%;
    width:100%;
}


/* Body styles */
body {
    background:url(../images/background.png) top center no-repeat #101010;
    color:#ffffff;
}

我的代码基本上是20个loren ipsum段落，后面是div

现在我尝试将位置设置为相对和绝对等，但使用绝对时，div将自身与屏幕底部对齐，因此当您向下滚动div时，div将与其对齐

我尝试将其设置为相对，但当没有足够的内容使页面滚动时，div不在页面底部

我试着修好了，但那正好修好了。。对我没用

如何使div位于屏幕和页面的底部取决于是否有滚动

您需要一个javascript解决方案：部分固定，部分内联或绝对，由js决定。jQuery是这里的一个选项吗？这里有一个屏幕广播：

好的，已经修复并且工作正常：我希望它能达到你想要的效果。在此预览：


测试内容：D

听起来传统的粘性页脚与提问者想要的正好相反。内容的隐藏部分呢？有没有办法防止这种情况？

<html>
    <body style="padding:0;">
        <div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
            test content :D
        </div>
        <!--Content Here-->
    </div>
    </body>
</html>