Html 如何创建不包含';不要与其他内容冲突?

Html 如何创建不包含';不要与其他内容冲突?,html,css,Html,Css,在示例页面上,我设置了div#content{ 垫底:20px; }如果20px足以将页脚保留在content div下面,则该选项效果良好。但是,如果页脚的大小发生变化,我还需要更改底部的填充量。我想要一个更灵活的解决方案 是否可以在不将页脚移出内容分区的情况下修复此问题? 更新: 已找到描述问题解决方案的页面,但作者还声明: 只有一个限制 必须将页脚div的高度设置为“自动”以外的其他值。选择您喜欢的任何高度,但确保在CSS中以像素或ems为单位指定该值。这不是一个很大的限制,但对于该方法的

在示例页面上,我设置了
div#content{
垫底:20px;
}
如果20px足以将页脚保留在content div下面,则该选项效果良好。但是,如果页脚的大小发生变化,我还需要更改底部的填充量。我想要一个更灵活的解决方案

是否可以在不将页脚移出内容分区的情况下修复此问题?

更新: 已找到描述问题解决方案的页面,但作者还声明:

只有一个限制 必须将页脚div的高度设置为“自动”以外的其他值。选择您喜欢的任何高度,但确保在CSS中以像素或ems为单位指定该值。这不是一个很大的限制,但对于该方法的正确运行来说是至关重要的。 如果你的页脚有很多文本,那么让页脚更深一点,让文本在底部有更多的空间也是一个好主意。这是为了迎合那些在默认情况下将浏览器设置为更大文本大小的用户。解决相同问题的另一种方法是以em为单位设置页脚的高度;这将确保页脚的大小随着文本的增长而增长。如果您的页脚中只有图像,则无需担心–只需将页脚高度设置为像素值即可


这让我相信,如果没有JavaScript,我想要实现的可能是不可能的

就我个人而言,我将页脚放在content div之外,这为我提供了一种更加一致和灵活的方法

我的代码可能是这样的

<div id="content">My content here</div>
<div id="foot">Copyright &copy; 2011 mywebsite.com. All rights reserved.<br />my random resize content here</div>
body {margin-bottom:10px;}
#content {padding:5px;}
#foot {padding:10px;}
这只是一个例子,但很明显,样式要适合您的页面和代码


我希望这有帮助

告诉我,如果我没搞错,请查看此链接,如果没有,请尝试解释一下问题所在


*你可以使用“position:absolute”;但这是你的选择,我不喜欢在网站有很多div和position的时候使用它的bug。

因为页脚的高度事先是未知的,所以你不能在CSS中设置明确的高度(px或em)。但是,您可以使用javascript获取页脚高度,并将内容
padding bottom
设置为页脚高度。jQuery中的一行:

$('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');
JSFIDLE:


您可能希望将CSS中的
填充底部设置为您对页脚高度的最佳猜测,并让javascript根据需要进行微调。

您能提供一些HTMl和CSS示例吗?当然,已经提供了,请查看问题顶部的示例页面。您是否尝试过将填充底部的值从px更改为em值,只需遵循限制免责声明底部的建议?是的,没有令人遗憾地起作用。对不起,我应该澄清一下,但在其他情况下,我需要把它放在内容分区内。@Emil没问题,伙计。。。这只是一个小细节如何影响你得到答案的例子;)