评论: 你问我答(27)——使用CSS定位页面的“footer” http://learning.artech.cn/20080328.css-footer-position.html 学习在前沿！这里是“前沿视频教室”，在这里您可以找到关于各种网页设计/网站开发/Flash动画相关的内容，而且我们都通过视频演示的方式，直观地向您讲解！包括CSS/Javascript/Flash/Dreamweaver/Fireworks/Photoshop等软件的使用和技巧! Wed, 08 Feb 2012 04:19:59 +0000 http://wordpress.org/?v=2.2 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-8836 温谦 Tue, 21 Apr 2009 01:26:53 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-8836 小陈, 这个问题并非一两句话可以说清的，也没有一个标准答案。 大致原则是，如果在标准流中搞不定的事情，考虑用相对定位和绝对定位，如果需要左右分列，考虑用浮动。 小陈,

这个问题并非一两句话可以说清的，也没有一个标准答案。

大致原则是，如果在标准流中搞不定的事情，考虑用相对定位和绝对定位，如果需要左右分列，考虑用浮动。

]]> 作者: 小陈 http://learning.artech.cn/20080328.css-footer-position.html#comment-8823 小陈 Mon, 20 Apr 2009 09:02:47 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-8823 在用到那个定位的时候。绝对定位~相对定位~固定定位~浮动定位要怎么理解。什么时候用到绝对定位。。 什么时候用到相对定位。什么时候用到固定定位。和浮动定位 在用到那个定位的时候。绝对定位~相对定位~固定定位~浮动定位要怎么理解。什么时候用到绝对定位。。
什么时候用到相对定位。什么时候用到固定定位。和浮动定位

]]> 作者: 使用CSS定位页面的“footer” | 青色's Blog http://learning.artech.cn/20080328.css-footer-position.html#comment-6345 使用CSS定位页面的“footer” | 青色's Blog Sat, 29 Nov 2008 06:27:29 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-6345 [...] 原文地址：http://learning.artech.cn/20080328.css-footer-position.html [...] […] 原文地址：http://learning.artech.cn/20080328.css-footer-position.html […]

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-5434 温谦 Thu, 23 Oct 2008 09:18:21 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5434 赶美超印， 抱歉，不知道您说的“弧度”是什么意思？您有什么具体的页面用到吗？把URL贴过来，我看一看？ 赶美超印，

抱歉，不知道您说的“弧度”是什么意思？您有什么具体的页面用到吗？把URL贴过来，我看一看？

]]> 作者: 赶美超印 http://learning.artech.cn/20080328.css-footer-position.html#comment-5430 赶美超印 Thu, 23 Oct 2008 04:24:38 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5430 老师您好！ 我不晓得弧度在网页中的运用，您能给我一个事例吗？ 老师您好！

我不晓得弧度在网页中的运用，您能给我一个事例吗？

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-5351 温谦 Sun, 19 Oct 2008 05:54:17 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5351 指教不敢当，大家多交流。找一个自己喜欢的方向，多发掘！ 欢迎常来这里交流。 指教不敢当，大家多交流。找一个自己喜欢的方向，多发掘！

欢迎常来这里交流。

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-5350 温谦 Sun, 19 Oct 2008 05:52:04 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5350 抱歉，这个我不知道怎么搞。 抱歉，这个我不知道怎么搞。

]]> 作者: fan_ni http://learning.artech.cn/20080328.css-footer-position.html#comment-5339 fan_ni Sun, 19 Oct 2008 04:44:39 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5339 温老师啊 还有XHTML*CSS书中有一点讲道 弧度的运用，没有具体的实例，我现在还不明白！ 你能不能给个实例！ 我想可以用它可以设置个斜区块，您说呢？ 温老师啊
还有XHTML*CSS书中有一点讲道
弧度的运用，没有具体的实例，我现在还不明白！
你能不能给个实例！

我想可以用它可以设置个斜区块，您说呢？

]]> 作者: fan_ni http://learning.artech.cn/20080328.css-footer-position.html#comment-5338 fan_ni Sun, 19 Oct 2008 04:36:49 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5338 你好，老师！ 我不是学平面设计的，现在没从事艺术了，不过我还是非常喜欢艺术方面的专业！尤其是对网页美工 方面感兴趣，所以......... 以后还要望老师多多指教！ 你好，老师！
我不是学平面设计的，现在没从事艺术了，不过我还是非常喜欢艺术方面的专业！尤其是对网页美工
方面感兴趣，所以………
以后还要望老师多多指教！

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-5317 温谦 Fri, 17 Oct 2008 09:59:14 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5317 fan_ni ， 您是希望在把文字放在一个多变形区域内，自动填充这个区域，来进行页面的布局吗 这个据我所知，即使CSS3也不支持~~~ 您是不是以前是做平面设计排版的，比如Indesign、Pagemaker之类用惯了？至少目前，网页上还实现不了。 当然，如果硬要做，个别的要求可以，比如说，你可以用若干个矩形盒子拼成一个斜的形状，利用浮动形成文字环绕效果。不过没有通用的方法。 fan_ni ，

您是希望在把文字放在一个多变形区域内，自动填充这个区域，来进行页面的布局吗

这个据我所知，即使CSS3也不支持~~~

您是不是以前是做平面设计排版的，比如Indesign、Pagemaker之类用惯了？至少目前，网页上还实现不了。

当然，如果硬要做，个别的要求可以，比如说，你可以用若干个矩形盒子拼成一个斜的形状，利用浮动形成文字环绕效果。不过没有通用的方法。

]]> 作者: fan_ni http://learning.artech.cn/20080328.css-footer-position.html#comment-5310 fan_ni Fri, 17 Oct 2008 09:21:37 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-5310 老师啊 有个网页反面的问题困饶我好久了 就是在网页中怎样添加一个斜线而非图片 或者说添加一个斜区块，如三角行区块，五边行之类的！ 你能告诉我吗？？ 老师啊
有个网页反面的问题困饶我好久了

就是在网页中怎样添加一个斜线而非图片
或者说添加一个斜区块，如三角行区块，五边行之类的！
你能告诉我吗？？

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-2270 温谦 Wed, 02 Apr 2008 07:15:16 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2270 哦，我这就明白您的意思了！ 谢谢您的补充，很不错！我觉得用纯CSS好像无法实现自动调整padding。用JS调整padding-bottom似乎是最好的解决方法了，如果你的页面上用了jQuery的话，改这个属性一行代码就可以了。 对于大多数网站，footer似乎是最稳定的部分了，高度一般不会经常改变，当然要是能够自动适应，是最好了。 哦，我这就明白您的意思了！

谢谢您的补充，很不错！我觉得用纯CSS好像无法实现自动调整padding。用JS调整padding-bottom似乎是最好的解决方法了，如果你的页面上用了jQuery的话，改这个属性一行代码就可以了。

对于大多数网站，footer似乎是最稳定的部分了，高度一般不会经常改变，当然要是能够自动适应，是最好了。

]]> 作者: BlackOut http://learning.artech.cn/20080328.css-footer-position.html#comment-2268 BlackOut Wed, 02 Apr 2008 07:13:24 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2268 我说的就是这个问题,footer的高度如果经常调整呢?不能总是手动地改padding-bottom吧?不过用js改padding-bottom似乎比插入元素的方法要好一些^_^,看来用CSS解决不了这个问题了.再次感谢您的回答! 我说的就是这个问题,footer的高度如果经常调整呢?不能总是手动地改padding-bottom吧?不过用js改padding-bottom似乎比插入元素的方法要好一些^_^,看来用CSS解决不了这个问题了.再次感谢您的回答!

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-2266 温谦 Wed, 02 Apr 2008 07:00:24 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2266 BlackOut ， 我不确认您是否理解了上面文章的意思。在这种方案中，footer是压住了contetn的一部分，所以用padding-bottom让出这个footer盖住的空间。 至于您说的文字内容超过满屏，我试了似乎没有问题啊，我不确认您到底遇到的问题是什么，希望实现的效果是什么？测试的时候您不需要加长测试页面，只需要把浏览器窗口变窄，变短一些，就可以出现滚动条了，就看到文字长度超过浏览器窗口高度的情况了。 BlackOut ，

我不确认您是否理解了上面文章的意思。在这种方案中，footer是压住了contetn的一部分，所以用padding-bottom让出这个footer盖住的空间。

至于您说的文字内容超过满屏，我试了似乎没有问题啊，我不确认您到底遇到的问题是什么，希望实现的效果是什么？测试的时候您不需要加长测试页面，只需要把浏览器窗口变窄，变短一些，就可以出现滚动条了，就看到文字长度超过浏览器窗口高度的情况了。

]]> 作者: BlackOut http://learning.artech.cn/20080328.css-footer-position.html#comment-2264 BlackOut Wed, 02 Apr 2008 06:42:13 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2264 我暂时用了个较笨的JS解决,希望能有CSS解决方案 JS代码: <script type="text/javascript"> <!-- window.onload=function(){ var addheight=document.getElementById("footer").scrollHeight; var addel=document.createElement("div"); addel.style.cssText="height:"+addheight+";padding-top:20px"; document.getElementById("container").appendChild(addel); }; // --> </script> 我暂时用了个较笨的JS解决,希望能有CSS解决方案
JS代码:
<script type="text/javascript">
<!–
window.onload=function(){
var addheight=document.getElementById("footer").scrollHeight;
var addel=document.createElement("div");
addel.style.cssText="height:"+addheight+";padding-top:20px";
document.getElementById("container").appendChild(addel);
};
// –>
</script>

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-2261 温谦 Wed, 02 Apr 2008 06:00:44 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2261 BlackOut ， 你在浏览器中试验过上面文章里的那个测试页面吗？内容超过浏览器窗口高度，也不会挡住的footer的，你再仔细试验一下？我在IE6/IE7/Firefox/safari测试都没有问题。 BlackOut ，

你在浏览器中试验过上面文章里的那个测试页面吗？内容超过浏览器窗口高度，也不会挡住的footer的，你再仔细试验一下？我在IE6/IE7/Firefox/safari测试都没有问题。

]]> 作者: BlackOut http://learning.artech.cn/20080328.css-footer-position.html#comment-2260 BlackOut Wed, 02 Apr 2008 05:55:44 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2260 如果#content的高度超过一屏(100%),那么下面的内容就会被#footer挡住了,解决办法希望发到我的邮箱,谢谢. 如果#content的高度超过一屏(100%),那么下面的内容就会被#footer挡住了,解决办法希望发到我的邮箱,谢谢.

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-2205 温谦 Sun, 30 Mar 2008 08:52:16 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2205 请参见CSS代码第24行，这是font属性的简写形式。如果不熟悉，可以查一下CSS的相关内容，一般的资料上都有。 请参见CSS代码第24行，这是font属性的简写形式。如果不熟悉，可以查一下CSS的相关内容，一般的资料上都有。

]]> 作者: aiis http://learning.artech.cn/20080328.css-footer-position.html#comment-2204 aiis Sun, 30 Mar 2008 08:48:31 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2204 我是问计算#footer的高度 那一行代码为什么是20px? 我是问计算#footer的高度 那一行代码为什么是20px?

]]> 作者: 温谦 http://learning.artech.cn/20080328.css-footer-position.html#comment-2203 温谦 Sun, 30 Mar 2008 08:20:29 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2203 aiis， 这是为#footer计算高度，要以#footer中的尺寸计算，请参见CSS代码第24行。 aiis，

这是为#footer计算高度，要以#footer中的尺寸计算，请参见CSS代码第24行。

]]> 作者: aiis http://learning.artech.cn/20080328.css-footer-position.html#comment-2202 aiis Sun, 30 Mar 2008 08:13:56 +0000 http://learning.artech.cn/20080328.css-footer-position.html#comment-2202 font: 12px/1.5 arial; 怎么得出font-size是20个像素呢？就是/*20px(font-size)x2(line-height) + 10px(padding)x2=60px */中的20px(font-size)? font: 12px/1.5 arial; 怎么得出font-size是20个像素呢？就是/*20px(font-size)x2(line-height) + 10px(padding)x2=60px */中的20px(font-size)?

]]>