网页内容高度不够时，让footer处于页面底部的方法(不是固定在底部)

最新推荐文章于 2019-03-13 14:00:52 发布
最新推荐文章于 2019-03-13 14:00:52 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： HTML/CSS

转自 : https://blog.csdn.net/buppt/article/details/78049780

亲测有效:

<body class="main">
   <header></header>
   <content></content>
   <footer></footer>
</body>

页面内容如上，设置如下css样式。


.main {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
 
header {
  background: red;
  min-height: 100px;
}
 
content {
  background: blue;
  flex: 1;  /* 1代表最大 */
}
 
footer {
  background: green;
  min-height: 100px;
}

具体再根据需求调整一下就行了。

马大头
关注
专栏目录
sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延
enterlind的博客
07-30 504
　　sticky布局在pc端和移动端都有很大的需求，下面列举一下常用并亲测的几种方法。 1.flex布局方式实现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;兼容ie10+&lt;/title&gt; &am
将页脚固定在页面底部的CSS实战
09-25
两者高度相同，这样`footer_placeholder`可以为页脚腾出空间，即使内容不足，页脚也能保留在页面底部。 ```css .footer, .footer_placeholder { height: 120px; /* 假设页脚高度为120px */ } ``` 通过上述CSS代码...
footer在内容少的时候屏幕底部内容多在内容底部
11-08
footer在内容少的时候屏幕底部内容多在内容底部
页面内容不够高footer始终位于页面的最底部
weixin_30289831的博客
04-06 308
相信很多前端工程师在开发页面时会遇到这个情况：当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，用户视觉上会有点不好看，想让页脚始终在页面最底部，我们可能会想到用： 1.min-height来控制content中间内容区高度来让页面高度能够占满显示屏一屏，但是大型网站页面比较多的情况下footer都是模块化添加进去的，每个页面高度都不会一样，不可能去设置每个页面中间内容区min-heig...
footer部分，当页面主题内容不满一屏时，始终位于页面底部
weixin_30918633的博客
09-15 180
比如上面这种情况，footer部分本来应该位于最底部，但是main内容太少导致连在一起，影响美观 解决方案： 给footer加上margin-top:负值 值的大小为footer的高度 写了个小demo代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
当页面内容不够的时候，如何让footer一直固定底部显示
weixin_30897233的博客
02-27 575
<script type="text/javascript"> // 处理页面高度过矮时底部出现空白问题 window.onload = function(){ //待页面所有图片加载完毕后再执行 jQuery(".footer").css({'display':'block'}); if (document.body.clientHeight < ...
当页面内容不够的时候，怎么让footer一直底部显示?
zhh_Tony
09-28 8020
Document html,body {   margin: 0;   padding:0;   height: 100%; } #container {   min-height:100%;   height: auto !important;   height: 100%; /*IE6不识别min-height*/   position: relative; } #
jQuery mobile 让footer处于底部
最新发布
07-10
在jQuery Mobile中，要将页脚（footer）固定在底部，你可以使用以下方法： 1. 在`<div data-role="page">`标签内部，创建一个内容（content）区域，并设置`data-role="content"`。 2. 在内容区域内添加你的页面...
CSS Sticky Footer布局,使DOM始终位于页面最下方，不会与上方内容重叠.zip
01-08
在网页设计中，保持页面底部（Footer）始终固定在页面底部，即使页面内容较少时也不与主要内容区域重叠，这种布局方式被称为“CSS Sticky Footer”布局。这种布局模式能够提供良好的用户体验，使得用户在浏览页面时...
CSS教程:完美的绝对底部
09-27
当网页内容不足以填满整个屏幕时，传统的布局方式会让底部元素提前出现在页面中间，留下大片空白区域，这在视觉上并不理想。为了解决这个问题，设计师们寻求各种CSS解决方案，但有些方案可能在窗口尺寸调整时引发...
使footer固定在浏览器底部
PigBiBiX的博客
09-05 2132
只要做网页，就百分之九十九会做footer的布局。一般我们最想要的布局是，footer一直固定在网页的底部。如果网页内容不多，就把footer固定在可视区的底部。       总体布局一般是这样的：       I am header I am content I am footer 如果content的内容不多，不足以不footer撑到底部，就会出现这样的情况。
实现自适应位置--footer紧贴浏览器底部
weixin_34192993的博客
02-27 812
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>紧贴浏览器底部</title><style type="text/css">* {padding: 0;margin: 0;}html {_overflow...
【css】内容不足时底部footer不在最低部解决办法
WANGHUAN-
03-13 990
css部分: 　　.continer{ 　　　　min-height: 100%; 　　　　padding-bottom: 60px; 　　} 　　.footer{ 　　　　height: 60px; 　　　　margin-top: -60px; 　　　　background-color: #313741; 　　　　color: #fff; 　　　　text-align: ce...
前端：页面内容不够，始终把footer固定在底部
前端小白菜
07-04 9262
绝对定位 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;页面内容不够，始终把footer固定在底部&lt;/title&gt; &lt;style&gt; ht
页面内容不足以铺满屏幕高度时，footer居底显示
夏天的甲虫
11-08 1万+
页面内容不足以铺满屏幕高度时，footer居底显示
完美解决HTML中footer保持在页面底部问题
热门推荐
NINE-NINE的博客
05-10 11万+
完美解决HTML中footer保持在页面底部问题
仅使用css，当body高度不足时，让footer始终底部显示。
cai649399010的专栏
04-28 1789
*{ margin: 0; padding: 0; } html,body{ height: 100%; } .wrap{ height: 100%; background-color: blue;
将footer固定在页面底部的实现方法
06-02
有多种方法可以将footer固定在页面底部，以下是其中的两种常见方法： 1. 使用CSS的position和bottom属性 可以通过设置footer的position为absolute或fixed，再将bottom属性设置为0，来将footer固定在页面底部。例如： ``` footer { position: fixed; bottom: 0; } ``` 2. 使用Flexbox布局 可以使用Flexbox布局来实现将footer固定在页面底部。将页面的整体布局设置为flex，并将主轴方向设置为纵向（column），将footer的flex属性设置为1，使其占据剩余空间。例如： ``` html, body { height: 100%; } body { display: flex; flex-direction: column; } main { flex: 1; } footer { flex: 1; } ``` 以上两种方法都可以将footer固定在页面底部，具体选择哪种方法可以根据实际情况和个人喜好来决定。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值