请教！css布局的问题

alsove 2010-11-15 12:04:19



<html>

<head><title>测试</title></head>

<body>

    <div id="head">页眉</div>

    <div id="main">

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

        内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

    </div>

    <div id="foot">页脚</div>

</body>

</html>

要求：
1. 页眉和页脚的高度都为：20px
2. 无论内容有多少，#main都刚好占满所有的剩余空间

我研究了挺长时间，都没做出来，请大家帮忙想想办法吧！(只有符和要求，html代码改改也没问题的)
谢谢了！

...全文

147 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

alsove 2010-11-18

打赏
举报

谢谢！

alsove 2010-11-15

打赏
举报

是的，指高度

yuxh81 2010-11-15

打赏
举报

2. 无论内容有多少，#main都刚好占满所有的剩余空间

你是指的高度否？

宽度可以用100%，高度只能通过js来实现（不完美）！

miyacnn 2010-11-15

打赏
举报

你想让层固定在上面和下面，有方法的，但是IE6有BUG的，给你发个文档你自己可以试试。
以下为引用的内容：
/*让position:fixed在IE6下可用! */
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

wwtbless 2010-11-15

打赏
举报

楼主是不是要这种效果呢？



<style type="text/css">

body,html{ margin:0; padding:0;}

#head{margin:0 auto;height:20px; width:980px; border:1px solid #0000FF;position:absolute;top:0px;background:#ccc}

#main{margin:0 auto;overflow:auto;position:absolute;top:20px; border:1px solid #0000FF;width:980px;margin-top:3px;bottom:20px;;background:#eee}

#foot{margin:0 auto;height:20px; width:980px;position:absolute;bottom:0px;border:1px solid #0000FF;background:#ccc}

</style>

</head>



<body>

<html>

  <div id="head">页眉</div>

  <div id="main">ddddddddddd

  内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

  内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />  内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

  内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />  内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

  内容<br />内容<br />内容<br />内容<br />内容<br />内容<br />

  </div>

  <div id="foot">页脚</div>

</body>

alsove 2010-11-15

打赏
举报

算了，结贴吧

alsove 2010-11-15

打赏
举报

回楼上：
不是的，我其实就是想让“页眉”和“页脚”始终保持在屏幕的最上端和最下端，不受#main内容长短的影响

miyacnn 2010-11-15

打赏
举报

楼主复制下，运行看看，是不是你要的效果
我的边框只是为了让你看的更清除
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,html{ margin:0; padding:0;}
#head{ margin:0 auto; height:20px; width:980px; border:1px solid #0000FF;}
#foot{ margin:0 auto; height:20px; width:980px; border:1px solid #0000FF;}
#main{ margin:0 auto; height:auto; width:980px;}
</style>
</head>

<body>
<html>
<div id="head">页眉</div>
<div id="main">
内容 内容 内容 内容 内容 内容 
内容 内容 内容 内容 内容 内容 
内容 内容 内容 内容 内容 内容 
内容 内容 内容 内容 内容 内容 
内容 内容 内容 内容 内容 内容 
内容 内容 内容 内容 内容 内容 
内容 内容 内容 内容 内容 内容 
</div>
<div id="foot">页脚</div>

</body>
</html>

alsove 2010-11-15