小编典典

使用flexbox，这很容易实现。

将包含3个隔层的包装器display: flex;的高度设置为100%或100vh。包装器的高度将填满整个高度，这display:

flex;将使该包装器的所有子级具有适当的flex-properties(例如flex:1;)，由flexbox-magic控制。

标记示例：

I'm a 30px tall header

I'm the main-content filling the void!

I'm a 30px tall footer

和CSS一起：

.wrapper {

height: 100vh;

display: flex;

/* Direction of the items, can be row or column */

flex-direction: column;

}

header,

footer {

height: 30px;

}

main {

flex: 1;

}

-[下面的旧答案]-

Layout

header {

height: 30px;

background: green;

}

footer {

height: 30px;

background: red;

}

I am a header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.

I am a footer

适用于所有现代浏览器(FF4 +，Chrome，Safari，IE8和IE9 +)

2020-05-16

html css设计页眉页脚,如何使用CSS制作此页眉/内容/页脚布局？相关推荐

使用母版页时内容页如何使用css和javascript
由于网站的主要频道页和列表页的头部和底部都是一样的,如果将每个页面放在单独的页面中,当头部和底部需要更改时维护量太大.于是想把头部和底部做成母版页,频道页和列表页的具体内容放到内容页中.这样当头和底需 ...
CSS设计指南(第3版)
<CSS设计指南(第3版)> 基本信息原书名:Stylin'with CSS:a designer's guide 作者: (英)Charles Wyke-Smith 译者: 李松峰丛 ...
iOS新闻类App内容页技术探索
为了更好的阅读体验,建议阅读原文据相关数据显示,截至2017年底,中国手机新闻客户端用户规模达到6.36亿人,移动App已经成为新闻和内容传播的最重要途径之一.而伴随着行业的竞争和发展,App中的内 ...
母版页调用内容页的方法的简单实现
在内容页中如何调用母版页上的内容大家想必都已经知道,这里我也不再啰嗦.我想介绍给大家的方法是如何在母版页中如何调用内容页的方法. 母版页给我们带来了很多方便性,但也带来了一个问题:在设计 ...
今日头条们的 App 内容页技术实现与优化 | CSDN技术头条
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 征稿啦! 「CSDN 技术头条」是 CSDN 全力打造的技术专栏,面向所有一线开发者征稿,专 ...
php v9 分页静态,PHPCMS V9自定义栏目伪静态实现方法(列表页/分页/内容页)
phpcmsV9 栏目伪静态的修改方法(支持自定义目录名),官方程序默认伪静态是不支持自定义栏目名的,所以今天就做了以下修改,让其支持! 一.编写.htaccess中的urlrewrite规则首先看 ...
ASP.NET母版页和内容页之间如何互相传值？
我们在asp.net中创建一个完整的母版页之后,接下来必然要创建内容页.从用户访问的角度来讲,内容页与最终结果页的访问路径相同,这好像表明二者是同一文件,实际不然.结果页是一个虚拟的页面,没有实际代码 ...
html文章标题列表,内容页(文章及产品页)标题该怎么写
内容页(文章及产品页)标题该怎么写内容导读:可以说,编辑文章(产品详情页)是seo最为基础的工作,但同时也是最重要的工作,因为网站内容的创作是基于用户需求的,所以,好的内容页必须同时注意搜索需求及用 ...
ASP.NET 母版页,内容页之间如何传参数
ASP.NET 母版页,内容页之间如何传参数绪论:本文介绍如何使用.net 母版页(.master)和内容页(.aspx)相互传参数母版页传值到内容页上面可以看见母版页的时间值已经到了内容页上面 ...
word排版----分节、页眉页脚、页码、制作标题样式
最近在用word写一些课程论文,被一些格式问题困扰许久,经过网上搜集资料加上自己的尝试,解决了部分问题,特此记录下. 标题样式的制作.略. 分节.主要涉及到分节符.附上一篇介绍分节符的文档. http ...

html css设计页眉页脚,如何使用CSS制作此页眉/内容/页脚布局？

I am a header

I am a footer

html css设计页眉页脚,如何使用CSS制作此页眉/内容/页脚布局？相关推荐

最新文章

热门文章