浮动对齐有关问题

2013-07-21

浮动对齐问题头部和底部固定，中间是上浮复盖头部一点。但底部没办法接着中间下面显示，头总和底宽是自适应的

浮动对齐问题
头部和底部固定，中间是上浮复盖头部一点。但底部没办法接着中间下面显示，头总和底宽是自适应的，中间是1000px。。。。求大虾门正解方法


<style type="text/css">
<!--
#top{
height:300px; 
background-color:#0033CC;
}
#box{
position: absolute;
top:240px;
left:50%;
width:1000px;
margin-left:-500px;
background-color:#FF6666;
height:auto;
}
#bottom{
height:200px;
background-color:#009933;
width:auto;
}
-->
</style>
<div id="top">头部</div>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div id="bottom">底部</div>

[解决办法]


<!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">
<!--
#top{
width:100%;
height:300px; 
background-color:#0033CC;
}
#content{width:100%;height:1000px;background-color:#ccc;position:relative;}
#box{
position:absolute;
    top:240px;
    left:50%;
background-color:#FF6666;
    height:auto;
width:1000px;
margin-left:-500px;
float:left;
}

#bottom{
height:200px;
background-color:#009933;
width:100%;
}
-->
</style>
</head>

<body>

<div id="top">头部</div>
<div id="content">
   <div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p> 
 
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</div>
<div id="bottom">底部</div>
</body>
</html>

[解决办法]

引用:

Quote: 引用:


<style type="text/css">
<!--
#top{
height:300px; 
background-color:#0033CC;
}
#box{
position: absolute;
top:240px;
left:50%;
width:1000px;
margin-left:-500px;
background-color:#FF6666;
height:auto;
z-index:1;
}
#bottom{
height:200px;
background-color:#009933;
width:100%;
position:fixed;
bottom:0px;
z-index:-1;
}
-->
</style>
<div id="top">头部</div>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div id="bottom">底部</div>

是这样吗

不是这个，底部是要接着中间后面显示的。还是谢谢


<style type="text/css">
body{ margin:0;}
#top{height:300px;background-color:#0033CC;}
#box{position: absolute;top:240px;width:100%;margin:0 auto;height:auto; text-align:center;}
#box1{margin:0 auto;width:1000px;border-bottom:1px solid #FF6666; background-color:#FF6666; text-align:left;}
#bottom{height:200px;background-color:#009933;width:100%;}
</style>
<div id="top">头部</div>
<div id="box">
  <div id="box1">
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <div id="bottom">底部</div>
</div>

这样可以不？
[解决办法]
不用定位无法实现遮盖。方案为中间和底部同时为绝对定位，底部距上方的top为中间的top+中间的高度

<html><body>
<style type="text/css">
body{ margin:0;}
#top{height:300px;background-color:#0033CC;}
#box{position: absolute;top:240px;width:100%;margin:0 auto; text-align:center;z-index:1;background-color:red;}
#bottom{position: absolute;top:expression(600);height:200px;background-color:#009933;width:100%;z-index:1}
</style>
<body onload="document.getElementById('bottom').style.top=document.getElementById('box').offsetTop+document.getElementById('box').offsetHeight">
<div id="top">头部</div>
<div id="box">
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <div id="bottom">底部</div></body></html>

热点排行

CSS

浮动对齐有关问题