内层的DIV怎么占满外层的DIV？

catcpp 2007-12-20 10:17:53

XHTML如下：
<div id='outer' style='height:100%'>
<div id='header' style='height:80px'>header</div>
<div id='content'>content</div>
</div>

请问怎么能让content占满余下的outer的空间？content设成100%会撑大outer!
谢了

...全文

470 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

i2ibm 2007-12-24

打赏
举报

LZ,這個問題我也遇到過，根據我的經驗，如果不用JS，這種佈局方法還是要用表格來做。

catcpp 2007-12-22

打赏
举报

可能我写的不清楚，实际上header是要固定高度的，content必须占满余下的outer的空间，而且outer的高度并不是固定的，可能会使用各种方式进行调整，比如用JS调整，content必须自适应占满。从前使用table是很简单的事情，请问要xhtml validated怎么做？

如下代码：

<!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>
<style type="text/css">
body
{
border:dotted 1px green;
}
#outer
{
border:solid 1px red;
height:300px;
}
#header
{
border:solid 1px pink;
height:100px;
}
#content
{
border:solid 1px blue;
}
</style>
</head>
<body>

<div id="outer">
<div id="header">header</div>

<div id="content">content</div>
</div>
<input type=button value="add" onclick="document.all.outer.style.height='200px';">
</body>
</html>

PS：能否不使用expression？用expression我知道怎么解决。

yixianggao 2007-12-20

打赏
举报

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">



body

{

    margin: 0px;

    height: 100%;

}

    </style>

</head>

<body>

    <div id='outer' style='height: 100%; background-color: yellow;'>

        <div id='header' style='height: 15%; background-color: #bbbbbb;'>header</div>

        <div id='content' style='height: 85%; background-color: #00eeee;'>content</div>

    </div>

</body>

</html>

xiaolei1982 2007-12-20

打赏
举报

都把高度设成为百分比操作不行吗？

yixianggao 2007-12-20

打赏
举报

outer的height:100%根本没起作用！
L@_@K



    <div id='outer' style='height:100%; background-color: yellow;'>

        <div id='header' style='height:80px; background-color: #bbbbbb;'>header</div>

        <div id='content'>content</div>

    </div>

gimse7en 2007-12-20

打赏
举报



<div id='header'  style='height: 80%;  background-color: #bbbbbb;'>header</div>

<div id='content'  style='height: 20%;  background-color: #00eeee;'>content</div>

一般用百分比啊
如果'header'一定要80px的话
估计要慢慢调整了
但固定死了以后拖动很难看啊