要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode-CSDN论坛

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章

结帖率 100%: <body><div id="content">Hello World!</div></body>

要求content宽度为100%，告诉随浏览器可视高度变化而变化，任何时候content上面留空20px，下面也留空20px。有必要的话，可以在body与div之间再套叠div，但是不能使用table，不允许JavaScript或通过QuirksMode实现，要求兼容IE6/7。（其它浏览器就不用管了，因为其它浏览器都很容易做到。）

0 2008-01-02 23:03:01

回复数 21 只看楼主引用举报楼主

⋅不知不觉，就是CSDN十年会员了，感恩送分！ ⋅很久不见大家，来散分了。。。 ⋅今年行情真的不好吗？ 更多帖子 关注私信空间博客 兔子党-连长 本版专家分：32113 蓝花 2008年2月 Web 开发大版内专家分月排行榜第三 2007年12月 Web 开发大版内专家分月排行榜第三: 不用套叠这么麻烦。要兼容ie6/7的话

直接

#content
{
   margin-top:20px;
   margin-bottom:20px;
}

就搞定了

0 2008-01-02 23:36:36

只看TA 引用举报 #1    得分 0

⋅【江湖救急高分求助】updatepanel 与 jQuery插件 jqTransform 结合，如何实现局部刷新 ⋅【Clean Code】你尝试了没有？ ⋅【xiaojing7 (枯井)】新年送分，代码分享 更多帖子 关注私信空间博客 yixianggao 本版专家分：25754 蓝花 2008年1月 Web 开发大版内专家分月排行榜第三 2007年8月 Web 开发大版内专家分月排行榜第三

IE6sp1下测试可用，IE7楼主自测！
没说不可以用expression吧，哈
L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style type="text/css">

*

{

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;

}

body

{

    background-color: black;

    height: 100%;

}

#content

{

    background-color: yellow;

    height: expression(document.body.offsetHeight-40);

    margin: 20px 0px 20px 0px;

}

    </style>

</head>

<body>

    <div id="content">Hello World!</div>

</body>

</html>

0 2008-01-03 00:17:44

只看TA 引用举报 #2 得分 0

⋅【江湖救急高分求助】updatepanel 与 jQuery插件 jqTransform 结合，如何实现局部刷新 ⋅【Clean Code】你尝试了没有？ ⋅【xiaojing7 (枯井)】新年送分，代码分享 更多帖子 关注私信空间博客 yixianggao 本版专家分：25754 蓝花 2008年1月 Web 开发大版内专家分月排行榜第三 2007年8月 Web 开发大版内专家分月排行榜第三

更新：IE6sp1下测试可用，IE7楼主自测（如果测试通过就给分吧）！
这版不用expression，哈
L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style type="text/css">

*

{

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;

}

html

{

    padding: 20px 0px 20px 0px;

}

body

{

    background-color: black;

    height: 100%;

}

#content

{

    background-color: yellow;

    height: 100%;

}

    </style>

</head>

<body>

    <div id="content">Hello World!</div>

</body>

</html>

0 2008-01-03 00:42:10

只看TA 引用举报 #3 得分 0

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章: expression也算是JavaScript啊。

0 2008-01-03 10:22:53

只看TA 引用举报 #4 得分 0

⋅新年伊始，散点分，祝自己行大运 ⋅CSS参考手册v3.1.0发布，欢迎使用 ⋅CSS参考手册新鲜出炉，欢迎使用 更多帖子 关注私信空间博客 飘零雾雨 本版专家分：17896 黄花 2006年10月 Web 开发大版内专家分月排行榜第二: IE6还是需要QuirksMode的

0 2008-01-03 10:24:47

只看TA 引用举报 #5 得分 0

⋅新年伊始，散点分，祝自己行大运 ⋅CSS参考手册v3.1.0发布，欢迎使用 ⋅CSS参考手册新鲜出炉，欢迎使用 更多帖子 关注私信空间博客 飘零雾雨 本版专家分：17896 黄花 2006年10月 Web 开发大版内专家分月排行榜第二: http://blog.doyoe.com/article.asp?id=135

0 2008-01-03 10:25:37

只看TA 引用举报 #6 得分 0

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章: 谢谢 yixianggao 提供的方法，在IE6中确实有效，但是在IE7中不行，不过至少有点思路了。

0 2008-01-03 10:30:19

只看TA 引用举报 #7 得分 0

⋅【江湖救急高分求助】updatepanel 与 jQuery插件 jqTransform 结合，如何实现局部刷新 ⋅【Clean Code】你尝试了没有？ ⋅【xiaojing7 (枯井)】新年送分，代码分享 更多帖子 关注私信空间博客 yixianggao 本版专家分：25754 蓝花 2008年1月 Web 开发大版内专家分月排行榜第三 2007年8月 Web 开发大版内专家分月排行榜第三: 呵呵，那俺下午试试IE7，稍后来再来回帖！

0 2008-01-03 12:06:59

只看TA 引用举报 #8 得分 0

⋅又是很久没来了，新年快乐，散分。。。。 ⋅又是很久木来CSDN了，散下分~ ⋅尼玛。。。。。急性肠炎好了，散分散分！！！！！ 更多帖子 关注私信空间博客 tony-杨 本版专家分：10707: expression是OnlyIE，也是需要运算的

你可以看看这个DIV+CSS自适应高度、宽度,兼容FF/IE[6|7]

Demo：http://demo.tonyang.com/html/album/ok.html

文章：http://blog.tonyang.com/?action=show&id=166
http://blog.tonyang.com/?action=show&id=164

0 2008-01-03 14:34:52

只看TA 引用举报 #9 得分 0

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章: gzty ，你的做法是在doctype前添加，这相当于把IE打回Quirks Mode噢。

0 2008-01-03 16:53:01

只看TA 引用举报 #10 得分 0

⋅【江湖救急高分求助】updatepanel 与 jQuery插件 jqTransform 结合，如何实现局部刷新 ⋅【Clean Code】你尝试了没有？ ⋅【xiaojing7 (枯井)】新年送分，代码分享 更多帖子 关注私信空间博客 yixianggao 本版专家分：25754 蓝花 2008年1月 Web 开发大版内专家分月排行榜第三 2007年8月 Web 开发大版内专家分月排行榜第三

下午把台机重装了XP，安了简体中文IE7，
3楼滴代码确实不好用，不过稍加修改就OK啦！
L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

    <style type="text/css">

*

{

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;

    height:100%;

}

html

{

    padding: 20px 0px 20px 0px;

    overflow: hidden;

}

body

{

    background-color: black;

}

#content

{

    background-color: yellow;

    overflow: auto; 

}

    </style>

</head>

<body>

    <div id="content">

        <!- 随便写，哈 -->

        IE6-sp1-chs 和 IE7-chs 下均测试可用！2008-01-03 19:47:43

        <div style="height: 2000px; width: 100px; background-color: #ffcccc;">测试块！</div>

        还有一句，哈

    </div>

</body>

</html>

0 2008-01-03 19:45:17

只看TA 引用举报 #11 得分 100

⋅新年伊始，散点分，祝自己行大运 ⋅CSS参考手册v3.1.0发布，欢迎使用 ⋅CSS参考手册新鲜出炉，欢迎使用 更多帖子 关注私信空间博客 飘零雾雨 本版专家分：17896 黄花 2006年10月 Web 开发大版内专家分月排行榜第二: 有点舍本逐末了，这样做的话，不仅其它浏览器不兼容，最重要的是头和尾两部分完全“无用”了。

0 2008-01-04 11:19:16

只看TA 引用举报 #12 得分 0

⋅【江湖救急高分求助】updatepanel 与 jQuery插件 jqTransform 结合，如何实现局部刷新 ⋅【Clean Code】你尝试了没有？ ⋅【xiaojing7 (枯井)】新年送分，代码分享 更多帖子 关注私信空间博客 yixianggao 本版专家分：25754 蓝花 2008年1月 Web 开发大版内专家分月排行榜第三 2007年8月 Web 开发大版内专家分月排行榜第三: 哈，斑竹说滴是，不过LZ滴需求就是如此！

如果需求变了，解决方案自然也就变了，9楼滴方法也不错！

0 2008-01-04 12:17:44

只看TA 引用举报 #13 得分 0

zmaini1420 本版专家分：144: UP!~

0 2008-01-04 14:50:11

只看TA 引用举报 #14 得分 0

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章: 我是需要做一个顶部和底部都固定有20px内容的页面，中间要能自动伸缩。我觉得只要能做到中间内容上下留空，剩下的什么两个元素定位很容易解决，大部分浏览器中把顶部那个定位top: 0;把底部那个定位bottom: 0;就行了。

仅仅要求IE6/7的做法，是因为FF能够轻易做到。一个元素top: 20px; bottom: 20px，那就行了。

0 2008-01-08 15:36:10

只看TA 引用举报 #15 得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 doworker 本版专家分：21: #content
{
      margin-top:20px;
      margin-bottom:20px;
}
确实是一个方法但是
#content
{
      padding-top:20px;
      padding-bottom:20px;
}
这个也是不错的选择都是兼容ie 6 7的

0 2008-01-08 16:53:20

只看TA 引用举报 #16    得分 0

doworker 本版专家分：21: 还有多说一句话你最好上传一个截图把你要的效果直观的弄出来这样就好写了要不会引起误解

0 2008-01-08 16:55:17

只看TA 引用举报 #17 得分 0

⋅谁能清下多媒体设计里面的帖子 ⋅firefox里有横滚那 ⋅请帮忙推荐一个php或asp的文章发布系统，要带论坛。 更多帖子 关注私信空间博客 ddcatlee 本版专家分：13201 蓝花 2004年7月多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第三: http://www.ddcat.net/blog/archives/2007/09/184.html

0 2008-01-08 17:03:48

只看TA 引用举报 #18 得分 0

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章: Ok. 这100分给 yixianggao ，但是我还有派生问题需要解决。

yixianggao的做法在页面内只能做一次（因为依赖于html{padding}），我需要一种使用于任何元素作为容器的做法。这样说吧，上面的问题中已经能放置一个#content，上下各留空20px。我现在要求在#content里面再放一个#sub-content，#sub-content相对于#content还是上下各留空20px。如果有人能做出来，我会为本帖再加100分，然后结给提供答案（或其它有意义信息）的人。

0 2008-01-08 17:10:00

只看TA 引用举报 #19 得分 0

⋅submit_to_remote如何加入insertion选项？

⋅如何对form_for与form_tag生成的<form />添加class属性？

⋅要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode

更多帖子

关注私信空间博客

CatChen

本版专家分：5051

微软MVP 2008年7月荣获微软MVP称号
2007年7月荣获微软MVP称号

百度VIP 2010年3月授予百度VIP勋章: 对了，这个派生问题只需要IE6的解决方案就够了。如果你能给出兼容IE7的就更好了，不过我手上缺的就是IE6的。

0 2008-01-08 17:11:52

只看TA 引用举报 #20 得分 0

⋅【江湖救急高分求助】updatepanel 与 jQuery插件 jqTransform 结合，如何实现局部刷新 ⋅【Clean Code】你尝试了没有？ ⋅【xiaojing7 (枯井)】新年送分，代码分享 更多帖子 关注私信空间博客 yixianggao 本版专家分：25754 蓝花 2008年1月 Web 开发大版内专家分月排行榜第三 2007年8月 Web 开发大版内专家分月排行榜第三: To cat_hsfz

关键在于height:100%;使用一次后，相应的div高度与body相同，
当内层div再使用height:100%;时，高度仍然与body相同，并未发生任何改变！

IE6下俺是没辙了，哈

0 2008-01-08 22:42:49

只看TA 引用举报 #21 得分 0

要求元素上下留空特定距离，不允许使用JavaScript或QuirksMode [问题点数：100分，结帖人cat_hsfz]