底部一直在最底部不管内容多少

最新推荐文章于 2019-01-18 15:21:17 发布
最新推荐文章于 2019-01-18 15:21:17 发布
阅读量368 收藏
点赞数
分类专栏： 代码 文章标签： 底部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch5256865/article/details/71155451
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px;  
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
  </style>
</head>
<body>
   <div id="content">
   <header>header</header>
   <section>
       <div id="main">
                      <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                       <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                       <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                       <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                       <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                       <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                       <h1>main</h1>
                      <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
                      <br>
                        <p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
                      <p>文字文字文字文字文字文字文字文字文字文字</p>
              </div>
   </section>
             
              <footer>
                  <div id="footer">
                      <h1>Footer</h1>
              <div>
              </footer>
          </div>
</body>
</html>

百世沉浮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现footer一直在页面底部
peakchen90的博客
10-11 788
CSS实现footer一直在页面底部，如果文档不够一页，这footer在底部，否则，footer跟随在文档底部效果图如下： HTML代码如下： <div class="wrapper"> <div class="header"> <h4>Header</h4> </div> <div class="container">
无论页面内容多长，footer始终在页面底部
SunPrincess的专栏
10-21 723
html<body> <div class="content"> <div class="header"></div> <div class="main-content"></div> <div class="footer"></div> </div> </body>css html, body { height: 100
css布局——底部固定，内容足够多时其位置随内容而变，始终在最底部
wj1224_的博客
11-21 5173
介绍–要实现的效果 实现–布局（重要） 没有使用定位positon：absolute\fixed;感觉达不到我想要的效果。 &lt;div class="bodybox"&gt; &lt;div class="box-wrapper"&gt; //放主要的内容 &lt;div class="mainbox"&gt; ...... &lt;/div&gt; &am
footer一直在最底部不管内容多少内容多的时候挤下去
ch5256865的专栏
05-03 1142
Document body,html { margin: 0; padding: 0; font: 12px/1.5 arial; height:100%; } #content { min-height:100%; position: relative; } #main { padding: 10px; padding-bottom: 60px; } #footer { pos
CSS布局:让页底内容永远固定在底部
weixin_30776273的博客
11-13 166
我们在设计一些页面内容甚少的网页时（典型应用就是登陆页面），由于显示器的分辨率大，在正常情况下，假如页面内容高度小于浏览器高度时，页面底部以下会留下很大的空间... 先看示例：http://www.helloweba.com/demo/cssfooter/demo1.html 不管浏览器的高度怎么变化，我们要想让页底内容始终固定在底部，最终效果如：http://www.helloweba....
css让页脚始终在底部不论页面内容多少
09-25
让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部，在某些情况下这些功能还是比较实用的，下面为大家介绍下几种不错的实现方法，大家可以参考下
div scroll始终在最底部的实现代码
09-06
在网页开发中，有时我们需要创建...总的来说，通过结合CSS的`overflow`属性和JavaScript的`scrollTop`属性，我们可以轻松实现一个div元素的滚动条始终保持在最底部的交互效果，这对于实时更新内容的界面设计非常有用。
DIV始终浮动在页面底部
09-27
在页面底部浮动功能是如何实现的呢？下面小编给大家带来div始终浮动在页面底部的关键代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
简洁网站底部内容响应式网页模板
01-22
通过设置断点，我们可以确保底部内容在大屏幕和小屏幕设备上都能正确显示。 2. **流式布局（Fluid Layout）**：响应式设计通常采用流式布局，其中元素的宽度会随着浏览器窗口大小的变化而动态调整。这样，即使在...
vue 中滚动条始终定位在底部的方法
10-18
今天小编就为大家分享一篇vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
底部功能的实现
06-14
高仿微信底部切换功能
css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法
热门推荐
想飞的猪的博客
01-18 2万+
1.只针对底部高度固定的情况，不能解决底部高度不固定的情况， 原理：主要内容放在page-main里面，page-container最小高度100%（注意这里html，body高度也要设为100%），position为relative。footer的position为absolute，相对于page-container居于底部。page-main有个padding-bottom为footer的高...
html自适应内容的高度，底部一直在页面的底部
qq_38744335的博客
05-25 8042
HTML只放body部分里面的内容：&lt;div class="box"&gt; &lt;div class="box-wrap"&gt; &lt;div&gt;-这里放你的页面内容-&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="footer&quot
当页面内容不够的时候，怎么让footer一直底部显示?
zhh_Tony
09-28 7940
Document html,body {   margin: 0;   padding:0;   height: 100%; } #container {   min-height:100%;   height: auto !important;   height: 100%; /*IE6不识别min-height*/   position: relative; } #
元素设置position:fixed后怎样控制下面内容的位置
weixin_33778778的博客
06-12 5725
2019独角兽企业重金招聘Python工程师标准>>> ...
mui底部不动的按钮
肖肖肖丽珠的博客
03-02 4165
立即报名         /*底部按钮*/          nav {         background: #fff     }          nav {         height: 50px;         top: inherit;         text-align: center     }          nav .m
footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）
纱厨藤簟，玉人罗扇轻缣。
06-05 1万+
在项目中常常会遇到这样的问题：页面主要内容不足以铺满一个屏幕的高度，footer下面就会有白块剩余。如下图：　　我们希望实现的效果是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示。如下图：　　而当主内容超过一屏时，自动跟随显示：　　方法如下。设置CSS：/*在主要内容不足以铺满整个...
MUI底部选项卡
qq_35589080的博客
03-07 1589
&lt;body&gt; &lt;header class="mui-bar mui-bar-nav"&gt; &lt;h1 class="mui-title title"&gt;首页&lt;/h1&gt; &lt;/header&gt;  &lt;nav class="mui-bar mui-bar-tab"&gt;         
html 滚轮内容一直在底部
最新发布
08-30
要实现让HTML滚轮内容一直保持在底部，可以通过CSS和JavaScript来完成。 首先，使用CSS设置一个固定高度的滚动容器，例如： ``` .scroll-container { height: 300px; overflow-y: scroll; } ``` 然后，在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值