如何用css将底部的内容定位到顶部

发布网友发布时间：2022-04-06 10:48

共4个回答

懂视网时间：2022-04-06 15:09

本篇文章给大家带来的内容是关于css如何实现footer定位（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css实现footer定位

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
 <style>
 html,body{ 
  width: 100%;  
  height: 100%;  
  margin: 0;  
  padding: 0; 
  }

 *{  
  margin: 0;  
  padding: 0; 
  }
 .box{ 
  width: 100%;  
  min-height: 100%;  
  padding-bottom: 50px;  
  box-sizing: border-box;  
  background: #e4e4e4; 
  }
 .content{ 
  background: #fff;  
  border-bottom: 1px solid #999; 
  }
 button{ 
  margin: 10px auto;  
  line-height: 30px;  
  width: 20%; 
  }
 footer{ 
  height: 50px;  
  line-height: 50px;  
  text-align: center;  
  margin-top: -50px;  
  background: #fff; 
  }
 </style>
 </head>
 <body>
 <div class="box">
 <button onclick="beLong()">变长</button>
 <p class="content" id="content">内容</p>
 </div>
 <footer>footer</footer></body><script>
 function beLong() {
 document.getElementById('content').style.height = '1000px';
 }</script>
 </html>

热心网友时间：2022-04-06 12:17

将底部的内容定位到顶部，只要在css层上面加上一个浮动，将定位至top设置成0即可。说明如下：
position：absolute（将对象浮动）
top:0; （将对象定位对顶部）

整体css示范如下：

如要将内容放至底部，只需将top:0修改成bottom:0即可，整体css未范如下：

希望我的回答能令你满意！

热心网友时间：2022-04-06 13:35

结合定位实现：

1)，如果希望相对于body或者是整个浏览器窗口定位

<body>

</body>

css:

#footer{position:absolute;left:0;top:0}

1)，如果希望相对于包含它的容器定位

<body>

</div>

</body>

css:

#box{position:relative}

#footer{position:absolute;left:0;top:0}

热心网友时间：2022-04-06 15:10

您好，请问您是想知道如何用css将底部的内容定位到顶部吗？