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

时间：2022-11-20 11:05:42

I have a div:

我有一个div：

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

And a html, body:

还有一个html，正文：

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


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

My code is basically 20 loren ipsum paragraphs followed by the div.

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

Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it

现在我尝试将位置设置为相对和绝对等等但是绝对地将div对齐到屏幕的底部，所以当你向下滚动div scrols时

I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.

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

I tried fixed but that just fixed it.. no use to me

我尝试修复，但只是修复它..对我没用

How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not

我怎样才能让div位于屏幕底部和页面，具体取决于是否滚动

2 个解决方案

#1

44  

Ok, fixed and working :D Hope it does what you want it to. Preview here: http://jsfiddle.net/URbCZ/2/

好的，修复和工作：D希望它做你想要的。在此预览：http：//jsfiddle.net/URbCZ/2/

<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>

#2

0  

You need a javascript solution: part fixed and part inline or absolute with the js to decide. Is jQuery an option here? Here's a screencast: http://jqueryfordesigners.com/fixed-floating-elements/

你需要一个javascript解决方案：部分修复和部分内联或绝对与js来决定。这是jQuery的选择吗？这是一个截屏视频：http：//jqueryfordesigners.com/fixed-floating-elements/

#1

44  

Ok, fixed and working :D Hope it does what you want it to. Preview here: http://jsfiddle.net/URbCZ/2/

好的，修复和工作：D希望它做你想要的。在此预览：http：//jsfiddle.net/URbCZ/2/

<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>

#2

0  

You need a javascript solution: part fixed and part inline or absolute with the js to decide. Is jQuery an option here? Here's a screencast: http://jqueryfordesigners.com/fixed-floating-elements/

你需要一个javascript解决方案：部分修复和部分内联或绝对与js来决定。这是jQuery的选择吗？这是一个截屏视频：http：//jqueryfordesigners.com/fixed-floating-elements/

标签：

相关文章