文档章节

CSS DIV嵌套于各层底部

 夏碌冬藏
发布于 2015/04/04 15:34
字数 138
阅读 185
收藏 7
点赞 0
评论 0

    网上找了很多例子,不不可行,之后在csdn帖子中找到了,记录一下。

    一定要在三层div中设置

style="position:relative;"

效果图:

CSS:

div{
border:1px solid black;
}
#content{
height:100%;
}
#left{
width:20%;
height:100%;
float:left;
position:relative;
}
#right{
width:78%;
height:100%;
float:right;
position:relative;
}
#bottom{
width:100%;
position:absolute;
bottom:0;
}

HTML:

<div id="content" name="content">
    <div id="left" name="left">
        <div id="top" name="top">图片</div>
        <div id="bottom" name="bottom">底部</div>
    </div> 
    <div id="right" name="right">右边
			<div id="top" name="top">图片</div>
			<div id="bottom" name="bottom">底部</div>
	  </div>
</div>




© 著作权归作者所有

共有 人打赏支持
粉丝 8
博文 49
码字总数 12155
作品 0
赣州
后端工程师
典型的三行二列居中高度自适应布局

典型的三行二列居中高度自适应布局 如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝色理想论...

恐空控
2013/06/13
0
0
CSS常见问题小技巧解决办法收集

一、常见问题 1、div标签未关闭  这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师,在未关闭的情况下记事本的不会提示你什么,如果是在DW中,未关闭DIV,开始的DIV会显示...

曾杨
2013/12/04
0
0
底部始终在最底部的五种方法

1.设置下边距为负值等于底部高度 css: html, body { height: 100%; margin: 0 } .footer { width: 100%; background-color: firebrick; } .content { min-height: 100%; margin-bottom: -50......

kenneth5530
2016/11/15
12
0
wap页面中页脚固定在底部,但受手机键盘的影响,页脚会被顶上去,怎么解决啊

wap页面中页脚固定在底部,但受手机键盘的影响,页脚会被顶上去,怎么解决啊! 分享 20 css: .totop-floating{ z-index:999; position:absolute; pos...

涛year
2015/12/17
1K
0
jQueryMobile快速入门

what   jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。![mobile-wh...

笔阁
2015/11/16
0
2
Sass的基础姿势

SASS是什么 传统的CSS是一种单纯的描述性样式文件,然而SASS可以对CSS进行预编译处理。在SASS源码中可以使用变量、函数、继承等动态语言的特性,并且可以编译成CSS文件。 安装与使用 安装 由...

Mllitch
2016/10/13
720
1
Web前端规范--HTML规范

1、html标签、html属性全部小写。 2、 文件应以”<!DOCTYPE … …>”首行顶格开始,推荐使用”<!DOCTYPE HTML>”。 3、必须声明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8...

CharmyZ
2016/10/20
13
0
在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下。...

小星星程序员
2014/11/13
0
0
让DIV在另一个DIV的底部_无需整理

有同学问: <div class="1"> <div class="2">XXXX</div> </div> 我想要div2在div1靠底部显示,这里两个属性要怎么写?? 答案: #CSS .1 {position:relative;} .2 {position:absolute;left;......

辣条拌鱼翅
2015/01/01
0
0
web前端开发中浏览器兼容问题(三)

11.li中内容超过长度后以省略号显示 此方法适用于IE与OP浏览器 <style type="text/css"> li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overf......

博为峰教研组
2016/12/01
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 配置时间和日期格式

你可以修改你 Confluence 为用户显示的时期和时间格式。设置的句法使用的是 SimpleDateFormat class,请参考 Java SimpleDateFormat 文档中的内容来设置日期和时间格式。 有下面 3 个时间和日...

honeymose
10分钟前
0
0
php seralize unserialize

关于PHP 序列化(serialize)和反序列化(unserialize)出现错误(Error at offset)的解决办法。 首先我们分析一下为什么会出现这个错误: 编码问题 UTF-8: ANSI: 我发现在我的机器上边编码改...

yeahlife
17分钟前
0
0
七、JSP九大内置对象和四个作用域

九大内置对象: request:类型是HttpServletRequest,和Servlet里的HttpServletRequest一模一样。 response:类型是HttpServletResponse,和Servlet里的HttpServletResponse一模一样。JSP里基...

Wakeeee_
20分钟前
0
0
第十四章NFS服务搭建与配置

14.1 NFS介绍 NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netap...

Linux学习笔记
52分钟前
0
0
双向认证-nginx

1、设置容器 docker run -it --name nginx-test2 -v /home/nginx:/apps -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro -p 8183:80 -p 7443:443 -d nginx:stable 2、修改nginx配......

hotsmile
52分钟前
0
0
深入了解 Java 自动内存管理机制及性能优化

一图带你看完本文 一、运行时数据区域 首先来看看Java虚拟机所管理的内存包括哪些区域,就像我们要了解一个房子,我们得先知道这个房子大体构造。根据《Java虚拟机规范(Java SE 7 版)》的规...

Java大蜗牛
54分钟前
4
0
SpringBoot | 第六章:常用注解介绍及简单使用

前言 之前几个章节,大部分都是算介绍springboot的一些外围配置,比如日志 配置等。这章节开始,开始总结一些关于springboot的综合开发的知识点。由于SpringBoot本身是基于Spring和SpringMvc...

oKong
55分钟前
9
0
云数据库架构演进与实践

如今,大型企业如金融企业和银行等,在下一代的微服务架构转型要求下,需要基础软件和数据平台能够实现原生的云化,以满足微服务架构的需求。 微服务,也就是一种面向服务的,有特定边界的松...

巨杉数据库
56分钟前
0
0
Linux系统梳理---系统搭建(一):jdk卸载与安装

1.去官网下载符合Linux版本的jdk,暂用jdk-8u171-linux-x64.rpm 2.登陆Linux,进入usr目录,创建java目录(方便管理,可以其他位置):mkdir java 3.上传下载的jdk包至Linux服务器,使用rz指令(sz f...

勤奋的蚂蚁
今天
0
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

六库科技
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部