flex上中下布局，header,footer固定

最新推荐文章于 2021-11-29 11:13:52 发布
最新推荐文章于 2021-11-29 11:13:52 发布
阅读量316 收藏
点赞数
原文链接：http://www.cnblogs.com/zhouzhou163/p/6100462.html
版权

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.wrap{
display:flex;
flex-direction:column;
height:100%;
}
.header,.footer{
height:80px;
width:100%;
background:#ccc;
}
.main{
flex:1;
background:#f60;
overflow-y:auto;

}
.main p{
line-height:10;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
header
</div>
<div class="main">
main
<p>1</p>
<p>1</p>

<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>

<p>1</p>
<p>1</p>
<p>4</p>
<p>4</p>
</div>
<div class="footer">
footer
</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/zhouzhou163/p/6100462.html

weixin_33827590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 flex布局之快速实现BorderLayout布局
12-13
在CSS中，要启用Flex布局，我们需要在父容器上设置`display: flex`。为了实现BorderLayout的效果，我们使用`flex-direction: row`来指定元素沿水平方向排列，并通过`flex-wrap: wrap`允许元素换行，以防内容溢出。...
h5左中右经典布局demo
12-12
接下来是“上中下结构”，这又称为header、content、footer布局。header通常包含导航和logo，content是页面的主要内容区域，而footer则用于放置版权信息和其他链接。在HTML中，可以这样编写： ```html <header></...
vue使用flex实现header和footer始终在页面顶部与底部
TTianYe的博客
11-29 1819
APP.vue的内容 <template> <div id="app"> <!-- 头部 --> <v-header class="header"></v-header> <!-- 一级路由出口 --> <div class="layout main"> <router-view /> </div> <!-- 底部 --> .
web rem适配flex布局解决header和footer固定
wz5208的博客
10-12 391
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m.
用css实现header/footer/aside/main布局
朱登凯的专栏
08-19 5416
对于程序员来讲，布局可把人给难为坏了。他们可能会求助于像element-ui、antd之类的UI框架，也可能会求助于position: absolute;之类的大招。 本篇来谈一下如何通过flex实现最常见的那种header/ footer/ aside/ main之类的布局。 实例代码 html代码： <body> <div id="app"> <div id="header"></div> <div id="content">
基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）
qazxbjp2010的博客
02-23 2万+
之前写过一个小项目，首先这个页面布局是这个样子滴，举个栗子，京东的首页： 这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。 思前想后，后来我决定使用弹性布局去做，至少在手机浏览器中都是支持的，虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS，配合HTML5 history AP
flex布局实现footer一直在底部
weixin_45655781的博客
12-21 1230
flex布局 目标 实现footer 不论内容有多少，都要保留在最底部，当内容少的时候，相当于以前的绝对定位，内容多的时候，又会跟随文档流向下移动。 方式 flex 来实现，主要属性为： flex-grow ,涉及到了剩余空间分配问题。 实现 html 部分分为上中下，三部分，属于常见布局。 <html> <body> <header> HEADER </header> <div class="content"&g
flex布局实现上下固定中间滑动的布局方式
11-20
在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于拥有头部、底部固定内容，中间区域需要根据内容多少滚动的场景。以下是如何...
实现网页上中(左右)下布局
07-12
"实现网页上中下布局"通常是指将网页分为三个主要部分：顶部（Top）、中间（Middle）和底部（Bottom）。这样的布局模式在许多网站中常见，能够有效地组织信息并提供清晰的导航结构。 在ASP.NET框架中，我们经常使用...
使用常见的sticky footer布局方式
12-29
什么是sticky footer布局 我们常见的网站页面都会把一个页面分为：头部区、内容区、页脚区,当头部区和内容区内容较少时,页脚区能固定在网页底部,而不是随着文档流排布。当页面内容较多时，页脚能随着文档内容自动...
flex布局解决footer布局问题
qkzia123的博客
02-01 1038
页面内容较少时，footer如果直接跟在content下面，效果会很难看，利用flex items的缩放属性即可解决。 容器得设置最小高度，footer无需设置flex。。 wrap_div： .wrap_div { display: flex; align-items: center; flex-direction: column; width: 100
使用flex实现一个固定在底部的footer
then啥
11-23 7961
 要求： 实现一个footer页脚，内容不足一页时在底部显示，当内容超过一屏高度时依然在内容底部 实现要点： html要设置height为100% body要设置min-height为100% 必须直接将内容区包裹在body内，且display: flex; 给需要占满整屏的元素添加flex: 1;  &lt;!DOCTYPE html&gt; &lt;html lang="en"&...
经典布局：固定header和footer，中间main超出自动滚动条
沧笙踏歌的博客
06-06 3767
效果 demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...
完美解决HTML中footer保持在页面底部问题
热门推荐
NINE-NINE的博客
05-10 11万+
完美解决HTML中footer保持在页面底部问题
[html] 写一个垂直的三栏布局，第一栏固定顶部，中间铺满，第三栏固定底部
歌谣的博客
03-14 524
[html] 写一个垂直的三栏布局，第一栏固定顶部，中间铺满，第三栏固定底部 好像有几种写法 我个人比较喜欢的是， <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .top-level { position: fixed; left: 0; right: 0; height: 50px; z-index: 999; } #top { top: 0; } #center { position: re
css经典布局之三栏布局（双飞翼，圣杯）！！！
牛牪犇
07-29 199
双飞翼布局和圣杯布局两者实现效果相同，都是为了实现一个两侧宽度固定而中间自适应的三栏布局 如图： 要实现一个三列布局的具体要求为： header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 主要实现思路为： Lleft、center、right三种都设置左浮动 设置center宽度为100% 设置负边距，left设置负边距为100%，right设置负边距为自身宽
vue移动端头部和底部不动，中间自由滑动的设置
improvement
06-06 5054
vue移动端头部header和底部footer不动，中间main自由滑动的设置 <template> <div id="app"> <div class="header"></div> <div class="main"></div> <div class="footer"></div> </div> </template> ​ style中
(案例)品优购项目-公共部分header和footer的制作
独特的懒人
08-15 543
2. nav导航栏制作 这边是一个通栏的盒子不需要给宽度，给一个高度47px再给一个下边框就可以了。 左边给定一个div盒子叫做dropdown,右边给定一个div盒子叫做navitems，因为都是块级元素，这里给一个左浮动。 dropdown要给一个宽度210px，给一个高度45px，再给一个背景颜色，高度是放在盒子里面的就不要量下边框 dropdown盒子的细节: 这边要看上下布局的细节(上下按照相关性应该放在一起的) - 根据相关性 ...
Flex 布局教程：实例篇
Mirage
11-16 2516
转载自：阮一峰的网络日志 作者： 阮一峰 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目.
用 h5写一个flex上中下左右布局
最新发布
07-13
你可以使用 HTML5 和 CSS 来实现一个基于 flex 的上中下左右布局。下面是一个简单的示例代码： ...<!... ... height: 100%;...这样，你就可以通过调整容器和子元素的样式来实现一个基于 flex 的上中下左右布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值