DIV附在视口底部

时间:2009-09-06 23:02:58

标签: css html

我已经阅读了一些关于如何将DIV附加到视口底部的其他帖子 - 我已经成功实现了一个解决方案,但我遇到了一些问题。< / p>

在:http://s222894377.onlinehome.us/

您可以看到在我创建和附加的DIV中有一个100%拉伸的图像。它上面的DIV设置为高度:100%;

但它的垂直空间有点太大,而我正试图弥补它对整体高度的影响。

结构是:

我尝试过设置负边距到顶部和底部边距以及填充以补偿标题高度的变化,但尚未弄清楚它。

如果有人提出一些建议 - 我们将不胜感激。

提前致谢,

毫米

3 个答案:

答案 0 :(得分:16)

如果您尝试将某些内容附加到浏览器窗口的底部并保留在那里,也许您可​​能对CSS position:属性感兴趣?

http://www.w3schools.com/Css/css_positioning.asp

具体而言,position: fixed;然后指定bottom: 0;将某些内容附加到浏览器的底部。

答案 1 :(得分:1)

如果您尝试在上部div上指定高度,我认为您会遇到问题。这样做会变得复杂和混乱。

试试这个:

在你的上层内容div上,不要设置高度;但是将底部填充设置为100px,或者一些超过允许底部div显示其完整内容而不重叠的值。这样,您的主要内容将正常流动,并占用所需的空间,但它不会受到底部div的干扰。

答案 2 :(得分:0)

我不确定我是否正确地阅读了您的问题,但唯一想到的是使用类似的东西:

div#content_block
{position: absolute;
top: 3em; /* basically this is 0 + vertical-height of the header; adjust to taste */
left: 0; /* assuming you want the div to stretch across the viewport */
right: 0;
bottom: 3em; /* 0 + vertical-height of footer */
overflow: auto;
}

但这感觉太可怕了,我不禁想到,通过更清楚地了解你的问题,可以实现更好的解决方案。

是否有可能发布(或链接到)描述您预期布局的图像?是否增加了相关的保证金和抵消额?此外,发布您的代码将是一个好主意(css和html)。