NO.24 关于左侧div固定宽度，右侧自适应时footer不能在最底部的问题 - 00fairy00

NO.24 关于左侧div固定宽度，右侧自适应时footer不能在最底部的问题

当用position:absolute;来完成左边div固定宽度，右边div百分百自适应的时候，如果左边div的高度比右边div的高，就会出现footer被挤上来

这是因为position:absolute;是不占位的，所以footer是贴着右边div的下边的，如下图：

我用了2种方法来解决此问题：

1.用js来控制

首先用js获取左边div的高度，然后设定content为此高度，footer就自觉的下去啦

代码

<!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>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style>
*{
    padding:0px;
    margin:0px;
}
body{
    color:#FFF;
    font-size:24px;
    text-align:center;
}
.container{
    padding-left:120px;
}
.left{
    width:120px;
    position:absolute;
    left:0px;
    background:#F00;
}
.right{
    width:100%;
    height:300px;
    background:#36F;
}
.foot{
    width:100%;
    height:30px;
    background:#000;
}
</style>

<script>
$(function(){
    var left_height = $("#left").height();
    alert(left_height)
    $("#content").height(left_height);
})
</script>
</head>

<body>
<div class="container" id="content">
    <div class="left" id="left">
        右边<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 class="right">左边</div>
</div>
<div class="foot">footer</div>
</body>
</html>

2.用css来实现

　不设置左边的div为position为absolute，由于container设置了一个padding-left，所以这里将左边div设置负的margin-left就可以了

代码

posted on 2009-12-23 10:31 00fairy00 阅读(1859) 评论(0) 编辑收藏举报

刷新页面返回顶部