纯css怎么控制一个div的高度跟随另外一个DIV高度发生变化

最新推荐文章于 2024-12-04 16:13:44 发布
最新推荐文章于 2024-12-04 16:13:44 发布
阅读量1.3w 收藏 4
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zml_2622798617/article/details/56485933
版权

实现的效果大致是这样的:左右两个div左边div的高度随着右边的高度发生变化，当两者的最大高度都不超过屏幕高度时整屏显示，当右边高度发生变化时候那么左边的高度跟随其发生变化：实现的关键点有两点：1 合理运用min-height   2 padding-bottom:9000px;margin-bottom:-9000px;两者的结合运用。下面贴上源码仅供参考;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.main{
width: 100%;
min-height: 100%;
background-color: pink;
overflow: hidden;
}
.header{
float: left;
width: 100%;
height: 100px;
background-color: blue;
}
.left{
float: left;
width: 150px;
min-height: 100%;
background-color: green;
padding-bottom:9000px; 
margin-bottom:-9000px;

}
.right{
float: left;
width: calc(100% - 150px);
min-height: 100%;
background-color: red;
padding-bottom:9000px;
margin-bottom:-9000px;

}
</style>

</head>
<body>
<div class="main">
<div class="header"></div>
<div class="left">
<ul>
<li>1</li>
</ul>
</div>
<div class="right">
<div class="txt">
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>

</div>
</div>
</div>
</body>
</html>

用Div+CSS完成一个等腰梯形
lelewang123的博客
11-09 5704
1.思路：等腰梯形实质上是顶点在同一点的两个相似三角形叠加在一起的的非公共部分。我们知道，用CSS很容易地能做出一个三角形，所以同理，做出一个等腰梯形也不是很困难 。我们只需要将内部的div水平垂直定位在外部div的内部，然后通过border大法绘出一个三角形，内部div其实并不一定要是一个三角形，因为内部div的主要用途在于覆盖外部三角形的一部分，使之成为一个等腰梯形，所以对外部div来说只需设置
并列div 等高（任何一个变高，其余随之变高）
撸码方为上策
03-17 730
直接上html .wrap{ border: 2px solid red; width: 300px; display: table; } .wrap .child{
CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
weixin_34102807的博客
07-29 695
.w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}
CSS3 俩个子元素，其中一个高度随另一个子元素高度而变化
ForeverFaithCC的博客
08-19 644
最近在公司中使用到一个场景，一个父元素高度固定，俩个子元素高度随另一个子元素高度变化而。写这篇文章主要是为了保存这个模板。
vue中 div高度随另一个div的高度变化
baidu_39084727的博客
12-18 3525
最近做了好几个项目，终于把手里的事情干完了，趁着这几天比较空整理一下最近遇到的一些问题以及解决方案。 问题描述： in-wrap的高度不固定，会随着内容的多少改变，而out-wrap的高度则需要跟随in-wrap的变化而变化，代码如下： <div class="out-wrap" id="out-border6"> </div> <div class="in-wrap"> <div class="text-wrap"> <div class="co
盒子总体高度不变，如何让盒子里面的一个div的高度随着另外一个div高度的变化而变化
weixin_43422861的博客
01-31 679
flex弹性盒子
如果需要第一个div是高度自适应，第二个div随着第一个div的高度增加而自己也增加的做法。
ni15534789894的博客
04-12 709
假如第一个div要高度自适应，随着元素的增加而变高，第二个div也随之变高，我们首先应该将第二个div的高度赋值给第一个div，例如：document.getElementById(‘myTask’).style.height = document.getElementById(‘medi’).clientHeight 在这需要注意一个问题，假如元素的.style.height获取不到或者是underfined可以使用client.height或者offsetHeight来获取他的高度。 将高度赋值完之后，
第二个div高度随着父div高度改变而改变的几种实现方式
hangzhang
01-18 2740
最近遇到这样一个需求，一个大的div高度不固定，里面有两个小的div，第一个div高度固定（比如为100px）,第二个div高度填满大div的剩余高度。实现也很简单，想到了好几种实现方式，记录一下。 因为外面大的div高度不固定，我在这里就默认填满body。 1、定位：外面大的div相对定位，第二个div绝对定位，设置top:100px。代码如下：outer设置overflow:hidden去
css如何控制div高度等于另一个DIV的高度?
jimlong的专栏
03-03 7967
让left的高度等于 center的高度.......... document.getElementById("left").style.height = document.getElementById("center").offsetHeight + "px";
css一个高度增加其他高度也增加,div 有个最小高度 里面的内容增加时，高度随着增加，有个最大高度...
weixin_33138295的博客
08-03 498
只要两个css属性就是行了：min-height, max-height,Document.cont {width: 800px;margin: 20px auto;background-color: azure;}.auto {min-height: 200px;background-color: bisque;max-height: 500px;overflow: auto;}p{border...
用纯CSS让子DIV自适应父DIV的高度
qq_43059062的博客
08-12 9008
我们在前端布局时经常使用栅格布局，而当栅格布局中的某个子元素高度发生变化，外层的父元素高度也会发生变化，如果此时想让其他子元素的高度依旧填充父元素，我们应该怎么做。 这是HTML部分代码，此时左侧的高度比右侧的高。 <div class="out"> 　　<div class="a"> <p>左侧的内容</p> <p>左侧的内容</p> <p>左侧的内容</p>
css 左边高度自适应，保持与右边的高度一致
DarlingYL的博客
05-11 2354
实现效果：左边红色区域高度不定，跟随右边蓝色区域的高度变化自适应。
css 实现右边div高度随着左边div内容的增加，右边div的高度也增加（左边div与右边div高度保持一致）
ruixuefine的博客
01-10 2634
从ajax传回来的数据左边撑开了比较多，右边的数据默认显示在下方，添加css更改位置 <template> <div class="indexOne"> <div class="nav_info"> <div class="left_info">8888888888888888888888888888888888888888888888888888889 99999999999999999999999999
让底下的DIV根据上面的DIV高度自动调整偏移量
工作札记
01-14 973
先引入一个jquery文件，然后建立两个DIV： &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="DIV1"&gt;&lt;/div&gt; &lt;div id="DIV2"&gt;&lt;/div&gt;
相邻div实现一个跟着另一个自适应高度示例代码
weixin_34309435的博客
06-24 213
方法一： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>new document</title> <style type="text/css"> .wrap{ border:1px so...
实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
https://shixuebin.gitee.io/hexo-blog/
07-21 1416
【代码】实现两个div滑动时联动（滑动任意一个，其他一个跟着动）
CSS---父div 跟随子div移动解决方法
maidu_xbd的博客
04-03 4343
最近在做小项目时，出现以下布局问题： 布局图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
使用css实现并列div高度随动
weixin_30795127的博客
01-29 206
1.写出基本的html结构和css样式 <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV高度自适应</title> <style> .container{ 　　　　　　　display:table; ...
html-两个div，让一个div跟随另外一个div的高度
最新发布
qqRZL的博客
12-04 886
在开发的过程中遇到有些场景事这样的，两个div的高度不一致，而且都是动态高度，有的时候div1高，有的时候div2高，如果设置flex的话，那么就会把较矮的元素撑大，但是我想始终都以div1的高度作为基准，div2的高度超出div1的高度则显示滚动条，没有超出就正常显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值