css页眉标签,CSS – 带页眉和页脚的100％高度

我试图设计一个页面,一个标题,一个主要的div可以延伸到垂直景观的100％(减去页眉和页脚)和页脚.喜欢这张照片：

我可以让头和主div工作.喜欢这个：

HEADER

MAIN

FOOTER

有了这个CSS：

html {

height: 100%;

}

body {

margin: 0;

padding: 0;

height: 100%;

}

.header_div{

height: 40px;

width: 100%;

background-color: #000000;

}

.main_div{

margin-bottom:40px;

margin-top:40px;

position:absolute;

top:0px;

left:0px;

right:0px;

bottom:0px;

background-color: red;

}

.footer_div{

position: relative;

height: 40px;

width: 100%;

background-color: blue;

}

所以主要的div从顶部开始40px,以便标题,然后从底部停止40px的页脚.这样做很好,但是我不能让脚下的div显示在主div下方.现在的位置是：相对它将页脚放在主div上.如果我使用position：absolute将它放在主div下面.

我相信我只是做错了,因为CSS不是我的事情.

对此的任何帮助将是巨大的.

谢谢

css页眉标签,CSS – 带页眉和页脚的100％高度相关推荐

css页眉标签,css与页眉，页脚和多栏布局scrled
我正在尝试创建一个网页布局模板我的目标是页眉,页脚和2列之间,2栏是什么都给我最大的头痛,我想左列为固定宽度,右侧列填充剩余区域,我也成功完成了这一项.但我也希望这两列'垂直填充雨区,当内容填充超过我 ...
HTML+CSS简单漫画网页设计成品--(红猪（9页）带注释)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
梯形面积php,CSS实现梯形标签页
在web设计中,梯形标签页是很常见的一种形式,但是梯形又是一种很难实现的样式,下面小编给大家分享使用CSS实现梯形标签页的代码,需要的朋友参考下吧在web设计中,梯形标签页是很常见的一种形式,但是梯 ...
基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 ...
小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS
文章目录前言一.登录页二.首页三.我的购物车页四.我的订单页五.确认订单页六.详情页七.整体结构和效果图总结前言仿小米商城官网项目是本人实训内容,实训老师带着做的首页和登录页,本 ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...
web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
HTML5+CSS大作业--简单的个人图片网站(6页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
html简单个人网页制作 HTML5+CSS大作业——程序员个人简历设计(5页)
HTML5+CSS大作业--程序员个人简历设计(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...

css页眉标签,CSS – 带页眉和页脚的100％高度

css页眉标签,CSS – 带页眉和页脚的100％高度相关推荐

最新文章

热门文章