<div class="main">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
main这个div我做成了可以随意缩放改变其大小，即他的height和width是随时改变的，top这个div的高度是固定的，我想让bottom这个div的高度随着main这个div的高度改变而改变，填充剩余的部分，即始终等于main.height-top.height，请问如何用CSS的方式解决？
-
等级
本版专家分：0结帖率 87.5% -
我的代码如下：
<div class="main">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
main这个div我做成了可以随意缩放改变其大小，即他的height和width是随时改变的，top这个div的高度是固定的，我想让bottom这个div的高度随着main这个div的高度改变而改变，填充剩余的部分，即始终等于main.height-top.height，请问如何用CSS的方式解决？展开阅读全文
-
等级
本版专家分：5153 -
只能用JS去解决了
-
等级
本版专家分：21362勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
优秀版主
2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主
-
- 蓝花 2015年7月 Web 开发大版内专家分月排行榜第三
-
-
bottom的高度和宽度使用百分比，即100%试一试。
-
等级
本版专家分：0
-
top是有一个高度的，用100%的话，会超出的。
-
等级
本版专家分：0
-
就是不想用js的方式解决啊、、、、
-
等级
本版专家分：21362勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
优秀版主
2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主
-
- 蓝花 2015年7月 Web 开发大版内专家分月排行榜第三
-
-
在main中的高度确定后，减去top的高度，就是bottom的高度
-
等级
本版专家分：65
-
main这个div你做成随意缩放是什么意思？是用鼠标可以拖动main这个div吗？
-
等级
本版专家分：65
-
用position试试看，然后main跟bottom的高度用百分比。
-
等级
本版专家分：0
-
这样说没错，但是如何用CSS实现？
-
等级
本版专家分：0
-
对，我做的就是一个类似文件夹的功能，打开后，可以拖动，可以缩放，在缩放时，main这个div的高度和宽度是在一直变化的，用js的方式当然可以解决，但我就是想用CSS的方式解决，不知道有没有好的方法
-
等级
本版专家分：0
-
根据7楼pad1614同学的提醒，最后我采用的是这样的方法：将top的position设置为absolute，将bottom的heigth设置为100%，再在bottom里面添加一个div，其高度和top一样，这样top就会将其覆盖，bottom中剩下的内容则在top的下面显示出来，代码如下：
.top {height:30px; width:100%;position:absolute}
.top2 {height:30px}
.bottom{height:100%}
<div class="main">
<div class="top">
</div>
<div class="bottom">
<div class="top2">
</div>
</div>
</div>
- CSS实现div填满剩余高度
紫色盒子填充剩余的高度 BODY部分的代码： 方式一：绝对定位 方式二：box-sizing的两种方法 1. 方法一： 2. 方法二： 总结：这三种方法可以实现content盒子填充剩余部分的高度，且没有纵向滚动条，网上的flex...
- CSS实现div的高度填满剩余空间
高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。 需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条 2. 绿色部分...
- css实现div填充剩余高度 高度自适应
利用父元素的padding-top 和 头部div的margin-top(为负) 搭配巧妙的实现，代码如下： HTML代码： <div class="father"> <div class="header">header<...
- css设置div自动填充剩余高度
body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; } .A { height: 100px; margin: -100px 0 0; background: #BBE8F2;....B { height: 10...
- css高度自动填充剩余高度
利用flex布局实现自动高度 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <...
- div 自适应高度 自动填充剩余高度
div class="outer"> <div class="A"> 头部DIV </div> <div class="B">下部DIV </div></div>CSS...
- css实现div的高度填满剩余空间_【学习教程】CSS两列布局的实现方式
来源 |...在css面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。二，顶端定宽，右侧自适应如何实现？1、双列直插式原理：两个元素都设置dislp...
- css中div高度自适应且固定剩余高度由另外div内容填充
最近做个页面设计，头部是搜索框以及过滤按钮那些，而剩余高度内容则是列表内容用来显示过滤后的内容。在移动设备显示头部内容会随屏幕大小而改变，所以不能把高度设定死，但剩余部高度又要显示列表内容。构思是头部...
- 【前端-css】div填充中间剩余位置
两个各有各div。中间的div填满 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div测试</title> </head> <style> #one { ...
- HTML+CSS实现div的高度自适应填满剩余空间的7种方法
CSS实现div填充剩余高度 转发:https://my.oschina.net/linsk1998/blog/3005190 如图上下两部分，上面部分适应内容的高度，下面部分填充剩余部分。 当下面内容不够时，在下面部分出现滚动条 有2种...
- CSS让div沾满剩余的高度
高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。 需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现...3. 紫色部分填充剩余的高度 ...
- CSS布局：【转】CSS实现div的高度填满剩余空间
高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的...3. 紫色部分填充剩余的高度 HTML结构暂且如下： <divid="main"> <divid="nav"&g...
- 移动端div自动填满剩余高度
移动端div自动填满剩余高度 1、移动端，高度不确定。 2、前面内容高度也不确定。 3、剩下的div需要填满余下的高度做一些事情 4、网上查找了一些，自己试了试，觉得用flex挺方便的。 下面展示一些 内联代码片。 // ...
- div自适应填充剩余宽度的方法
两个DIV，左侧的div宽度固定，右侧DIV自适应填满剩下的宽度。直接上代码↓<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"...
- css实现上面div根据内容自动高度，下面的div自动铺满剩余高度
“加载更多”的功能，如果是监听某个dom元素来实现，你会怎么做？ 我的设想是： 1、此dom元素要可滚动； 2、判断合适应该做“加载更多”的逻辑； 在我所做的项目中，引用了bootstrap框架，并且这个dom元素隐藏的还...
- css实现元素自动填充容器剩余宽度
css实现元素自动填充容器剩余宽度 • 方法一 .container{ width: 1226px; margin: 0 auto; position: relative; } .right{ width: 300px; height: 300px; background-color: hotpink; position: absolute; top: 0; ...
- CSS实现div填充剩余高度
相信小伙伴们经常会遇到这...1：（这个方法不推荐使用，因为可能会因为设备不同，而出现未知BUG，特别是div出现padding的时候） <div class="main"> <div class="title"></div> <div c...
- 如何使div填充剩余的水平空间？
我有2个div：在页面的左侧是一个，在右侧是一个。 左侧的一个宽度固定，我希望右侧的一个填充剩余空间。 #search { width: 160px; height: 25px
- CSS.div剩余高度
3.1、div 自适应高度 自动填充剩余高度 - 炉火纯青 - 博客园.html（https://www.cnblogs.com/pangguoming/p/5695184.html） 方案一： 3.1.1、HTML <div class="outer"> <div class="A"> ...
- css实现div的高度填满剩余空间_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
一、让一个元素水平垂直居中，到底有多少种方案？水平居中 对于行内元素: text-align: center; 对于确定宽度的块级元素： width和margin实现。margin: 0 auto; 绝对定位和margin-left: -width/2, 前提是父元素...
- 2019美赛ABCDEF题题目（附C题数据）
2019美赛题目，完全是从官网下载，无翻译，可使用有道软件翻译浏览
- python爬虫20个案例
讲诉python爬虫的20个案例 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
- 2020年美赛优秀论文集.zip
2020年美赛优秀论文集，论文为完整版，包含附录，可以上手实操，不过全为英文，推荐结合CopyTranslator阅读：https://copytranslator.github.io/
- Visio_2016
visio_2016下载安装，亲测可用，不需要破解，而且无秘钥。简单方便实用
- 2020美赛O奖论文.zip
包含2020美赛所有题目的所有O奖论文，A题8篇，B题5篇，C题6篇，D题7篇，E题5篇，F题6篇。
- 微信小程序开发实战
本套课程使用了元认知教学法，直接实战式教学，摆脱学院派的理论式讲解，对于0基础的学员可以入门
- 2020年美赛C题O奖论文（含6篇）
2020年美赛C题O奖论文（含6篇）
- 软件工程--实践者的研究方法
软件工程专业以计算机科学与技术学科为基础，强调软件开发的工程性，该课程使学生在掌握计算机科学与技术方面知识和技能的基础上熟练掌
- 韦东山生活实例演绎法讲解蓝牙
市面上的蓝牙资料晦涩难懂，因为没有从初学者的角度讲解，我痛苦学习几个月后总结了一套
以故事的方式通俗易懂的讲解蓝牙协议的方法，希望你看了我的讲解
- 奥特曼大全及关系明细.pdf
此文档有详细奥特曼大全及关系明细