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

cat_hsfz 2008-01-02 11:03:01

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

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

...全文

216 21 打赏收藏举报

写回复

21 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

yixianggao 2008-01-08

To cat_hsfz

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

IE6下俺是没辙了，哈

打赏
举报

回复赞

cat_hsfz 2008-01-08

对了，这个派生问题只需要IE6的解决方案就够了。如果你能给出兼容IE7的就更好了，不过我手上缺的就是IE6的。

打赏
举报

回复赞

cat_hsfz 2008-01-08

Ok. 这100分给 yixianggao ，但是我还有派生问题需要解决。

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

打赏
举报

回复赞

ddcatlee 2008-01-08

http://www.ddcat.net/blog/archives/2007/09/184.html

打赏
举报

回复赞

doworker 2008-01-08

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

打赏
举报

回复赞

doworker 2008-01-08

#content
{
margin-top:20px;
margin-bottom:20px;
}
确实是一个方法但是
#content
{
padding-top:20px;
padding-bottom:20px;
}
这个也是不错的选择都是兼容ie 6 7的

打赏
举报

回复赞

cat_hsfz 2008-01-08

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

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

打赏
举报

回复赞

yixianggao 2008-01-04

哈，斑竹说滴是，不过LZ滴需求就是如此！

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

打赏
举报

回复赞

飘零雾雨 2008-01-04

有点舍本逐末了，这样做的话，不仅其它浏览器不兼容，最重要的是头和尾两部分完全“无用”了。

打赏
举报

回复赞

zmaini1420 2008-01-04

UP!~

打赏
举报

回复赞

yixianggao 2008-01-03

更新：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>

打赏
举报

回复赞

yixianggao 2008-01-03

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>

打赏
举报

回复赞

yixianggao 2008-01-03

呵呵，那俺下午试试IE7，稍后来再来回帖！

打赏
举报

回复赞

cat_hsfz 2008-01-03

谢谢 yixianggao 提供的方法，在IE6中确实有效，但是在IE7中不行，不过至少有点思路了。

打赏
举报

回复赞

飘零雾雨 2008-01-03

http://blog.doyoe.com/article.asp?id=135

打赏
举报

回复赞

飘零雾雨 2008-01-03

IE6还是需要QuirksMode的

打赏
举报

回复赞

cat_hsfz 2008-01-03

expression也算是JavaScript啊。

打赏
举报

回复赞

yixianggao 2008-01-03

下午把台机重装了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>

打赏
举报

回复赞

cat_hsfz 2008-01-03

gzty ，你的做法是在doctype前添加，这相当于把IE打回Quirks Mode噢。

打赏
举报

回复赞

tony-杨 2008-01-03

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

打赏
举报

回复赞

加载更多回复（1）