css控制满屏显示，footer固定在底部

最新推荐文章于 2021-06-16 08:50:24 发布
最新推荐文章于 2021-06-16 08:50:24 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/fm060/p/6248412.html
版权

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Untitled Document</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->
    <style>
        body,
        html {
            padding: 0px;
            margin: 0px;
            height: 100%;
        }
        
        header {
            height: 40px;
            width: 100%;
            background: #ddd;
            margin-bottom: -40px;
            position: relative;
            z-index: 2;
        }
        
        footer {
            height: 20px;
            width: 100%;
            background: #000;
            margin-top: -20px;
        }
        
        .main {
            min-height: 100%;
            width: 100%;
            background: red;
        }
        
        .main-box {
            padding-top: 40px;
            padding-bottom: 20px;
        }
    </style>
</head>

<body>

    <header>111111111111111111</header>
    <section class="main">
        <div class="main-box">
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
            <p>2222222222222222</p>
        </div>
    </section>
    <footer>33333333333333333333</footer>
</body>

</html>

转载于:https://www.cnblogs.com/fm060/p/6248412.html

weixin_30244681
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 适配 iPhoneX 全面屏
dlf_0610的博客
06-08 2848
CSS 网页适配 iPhoneX，就是这么简单 展开 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
12-14
前言 把 footer 区固定在底部，无论页面高度多宽，它始终在底部不会变，就像移动端的菜单一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>document</title> <!-- css --> <style> #demo{ position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #eee; z-index: 9999; } </style>
页面布局，实现footer永远在底部
08-03
使用html+css来实现传统的页面布局中footer固定在底部
响应式游戏网站之首页导航制作
qq_34448522的博客
01-19 350
看到一个风格很喜欢的游戏网站，准备试着用bootstrap做一下，正好最近在学习bootstrap。今天记录一下首页导航部分： 图上是效果图，下面附代码： html: &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equi
利用CSS使footer固定在页面底部的实例代码
09-24
在网页设计中，保持footer始终固定在页面底部是常见的需求，尤其在内容不足填满整个屏幕时，确保footer不会上浮。本实例将通过CSS实现这一功能，主要涉及的CSS属性包括`margin`, `height`, `min-height`, `position`...
CSS Sticky Footer完美的CSS绝对底部1
08-03
CSS Sticky Footer布局方案就是为了解决一种常见问题：当页面内容不足以填满整个视口时，底部会留在屏幕的上方，留下大片空白，这在视觉上并不理想。本文将详细探讨CSS Sticky Footer的原理和实现方法。 首先，CSS ...
将页脚固定在页面底部的CSS实战
09-25
通过上述CSS代码，我们可以实现一个灵活的“Sticky Footer”布局，无论页面内容多少，页脚都能稳定地固定在页面底部。这种方法的优点在于它既适用于内容丰富的页面，也适用于内容较少的页面，确保了页面整体布局的...
CSS实现footer“吸底”效果
09-22
这种方法适用于第一种情况，即底部元素始终固定在页面底部，内容区域可滚动。主要步骤如下： 1. 设置html和body的高度为100%，确保整个视口填充屏幕。 2. 创建一个包裹内容和底部的容器(wrapper)，并设置其`min-...
html的footer置于页面最底部的简单实现方法
09-28
这样，在内容不足时，父元素的高度会被自动拉伸以填满浏览器窗口，从而保证footer始终在视口底部。 通过这种方式，我们可以实现一个响应式的布局，使footer在任何情况下都保持在页面的最底部。这种方法适用于内容...
favicon 尺寸问题
MichaelAn的博客
07-01 5315
Favicon dimensions 最近更新网站的 favicon.ico 图标文件，需要美女设计师重新设计图标，那么需要设计什么尺寸的图标呢？有没有固定的标准？ 百度上的解释是 又查了下其他的资料 在栈溢出找到了详细的解释：https://stackoverflow.com/questions/2268204/favicon-dimensions I have a favicon wit...
使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目
bboyjoe的博客
08-29 5356
下载  Bootstrap 访问下面网站下载最新的 bootstrap 源文件 http://getbootstrap.com/ 找到如下所示的下载页面，点击 Download source 按钮即可下载，如果用 Sass 开发，那么把 Sass 文件也下载下来， 解压后，打开 bootstrap 文件夹可以看到里面有一堆文件以及文件夹，大致就像这样，
favicon.ico
screaming的博客
10-26 1505
What is Favicon.ico and How to Create a Favicon Icon for Your Website by Christopher Heng, thesitewizard.com Some time back, I had an email from a visitor asking me how I managed to have thefreecoun
HTML静态网页作业-篮球网页
学生期末作业
06-16 4407
HTML期末作业-篮球网页（HTML+CSS+Bootstarp） 部分源代码 <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>联系</title> &lt.
那些年的 Hello World （HTML）
晓强的技术博客
09-16 5152
那些年的 HTML说来话长，那些年开始于 2002年，我开始写第一个网页的时候。其间我和大伙儿一样写过很多很不同的 Hello World，有 c语言 ，Java语言，HTML语言，Asp，C# .NET，C++语言，Ruby语言，Python语言，Bash脚本，Scala语言，等等。最让我记忆犹新的也就是伴我整个 IT 入门到大学再到工作成为的整个历程。下面回忆一下我的 HTML 心理历程，经历，
Activiti6--[3] 整合Activiti6流程设计器
大风起兮云飞扬
11-27 4246
1 目的 将【1】中用到流程图设计相关页面拷贝迁移到项目中。 2 准备 2.1 准备项目 2.2 依赖说明 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter&lt...
Css利用fixed将body布满全屏并保持footer始终在最底部
OHHINK博客
06-10 5646
博客地址 Github 把footer固定在文章底部，按理说，应该是很简单的事情。但是今天却折腾了我一上午。原因是： 1.利用position:absolute;bottom:0;来固定footer位置时，content/main内容没超过一个屏幕（无滑动条），展示正常。超过一个屏幕（出现滑动条），展示异常。 2.按照正常堆积，若content/main内容没有超过一个屏幕，fo...
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的高...
css让footer始终位于页面的最底部
热门推荐
Hling's Blog
03-23 2万+
html代码结构为：<div class="container"> <div cass="header"></div> <div class="body"></div> <div class="footer"></div> </div>第一种情况：footer随着进度条的滚动而滚动.container{width:100%;min-height:100%;position:relative;} .b
footer固定在底部
最新发布
10-18
要让 footer 固定在底部，可以使用 CSS 的 flex 布局。具体实现方法如下： 1. 在 HTML 中，将整个页面的内容包裹在一个 div 容器中，例如： ```html <!-- 页面内容 --> <footer>版权信息</footer> ``` 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值