DIV始终浮动在页面底部

编程基础网前端开发

2024-01-08

要实现“DIV始终浮动在页面底部”，有以下几种方法：

要实现“DIV始终浮动在页面底部”，有以下几种方法：

1. 使用绝对定位

通过将DIV的position属性设为absolute，并将bottom属性设为0，可以将DIV固定在页面底部。示例代码如下：

#bottom-div {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; /* 注意要设置高度，否则DIV会被其他元素遮挡 */
}

<body>
  <div id="bottom-div">我始终在页面底部！</div>
</body>

2. 使用flex布局

利用flex布局可以非常方便地实现“DIV始终浮动在页面底部”。首先需要给最外层的容器设置display: flex，然后给容器内的元素设置flex-grow属性。示例代码如下：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 这里设置min-height为100vh，确保即使内容不足一屏，容器仍然占据整个屏幕高度 */
}

#content {
  flex-grow: 1;
}

#bottom-div {
  flex-shrink: 0;
  height: 50px; /* 注意要设置高度 */
}

<body>
  <div id="content">我是页面内容</div>
  <div id="bottom-div">我始终在页面底部！</div>
</body>

以上两种方法都可以实现“DIV始终浮动在页面底部”，根据实际情况选择合适的方法即可。

编程基础网

本文标题为：DIV始终浮动在页面底部

上一篇： vue.js 实现点击div标签时改变样式

下一篇： css 跨浏览器实现float:center

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX