要求元素上下留空特定距离,不允许使用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)
发帖
CSS

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
帖子事件
创建了帖子
2008-01-02 11:03
社区公告
暂无公告