css实现左边高度自适应右边高度

最新推荐文章于 2021-06-28 22:02:41 发布

花生地瓜

最新推荐文章于 2021-06-28 22:02:41 发布

阅读量6.9k

点赞数

分类专栏： pc-web前端开发

本文链接：https://blog.csdn.net/u013018357/article/details/78455819

版权

本文介绍了如何使用CSS来布局一个页面，使得左侧栏的高度自适应，右侧栏与之保持相同高度。通过灵活运用浮动、定位或者Flexbox、Grid等布局方式，可以实现这种效果。无论是经典的老式布局还是现代的响应式设计，都能找到合适的解决方案。

摘要由CSDN通过智能技术生成

css样式
    <style>
.container {
    width:960px; height:100%; overflow:hidden; margin:0 auto;}
.left {
    height:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花生地瓜

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

纯Css实现Div高度根据自适应宽度（百分比）调整

11-20

}实现图片高度跟随宽度比例调整。然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就...

css 左边高度自适应，保持与右边的高度一致

最新发布

DarlingYL的博客

05-11

1943

实现效果：左边红色区域高度不定，跟随右边蓝色区域的高度变化自适应。

参与评论您还未登录，请先登录后发表或查看评论

css怎么实现左边高度随右边的高度变化

css_666的博客

12-25

3069

方案一：flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

左侧内容随右侧内容高度自适应高度

天空影

08-16

1791

&amp;lt;style&amp;gt; * { margin: 0; padding: 0; } html,body { height: 100%; } .container { width: 960px; ...

用CSS让左边导航栏的高度自适应右边

zanxin0331的专栏

08-17

5676

用父子路由左右排版后，左边作为导航栏，右边是具体的展示内容：右边CSS中给height：auto后可以根据内容的多少自适应大小，但是左边的导航栏背景高度不能随着右边的高度自适应看起来就很丑，找了很多方法都没有解决，最后发现了两句话就解决了。还有就是要将这左右两个div再用一个父div套起来。 ...

让左侧导航背景颜色高度随着右边的内容改变高度呀

weixin_30352191的博客

11-01

473

<styletype="text/css"> .container{width:960px;height:100%;overflow:hidden;margin:0auto;} .left{height:100%;width:200px;overflow:hidden;padding-bottom:9999px;margin-bottom:-9999px;...

左边盒子高度随右边盒子高度的变化而变化

qq_43654065的博客

06-16

1289

1. flex布局 flex布局需要注意的是不要在设置display：flex的盒子上设置高度，否则里面的两个盒子会继承这个高度，当设置的宽度小于里面的盒子的宽度时，会压缩里面两个盒子的宽度。 html <div class="box"> <div class="content clearfix"> <div class="left-box"><span>我是左侧</span></div> <di

CSS 实现高度自适应铺满整屏的实现

01-18

在自己写demo的过程中，想使用display:flex实现垂直居中，代码如下： <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ ...

vue+elementUI 实现内容区域高度自适应的示例

10-14

除了使用JavaScript动态绑定，我们还可以借助CSS3的`calc()`函数来实现高度自适应。`calc()`函数允许在CSS中执行简单的计算。在示例中，`.el-main`的CSS规则如下： ```css .el-main { height: calc(100vh - 70px);...

css textarea 高度自适应,无滚动条

09-27

以下是如何使用CSS来实现`textarea`高度自适应的方法。首先，我们可以设置`textarea`的基本样式，例如宽度和溢出行为。例如： ```css .t_area { width: 300px; overflow-y: visible; } ``` 这段代码中，`width...

CSS布局--左侧自适应母元素高度

Micircle的前端笔记

07-17

2265

CSS布局--左侧自适应母元素高度

左侧容器高度随着右侧容器的高度改变而改变

SuperCoooooder的博客

02-27

1629

MJBlog(mj.588cy.com) * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} a{ text-decoration:

左边盒子高度随右边的变化而变化，两种方法

cky的博客

06-15

1411

<divclass="contentclearfix"> <divclass="left-box"><span>我是左侧</span></div> <divclass="right-box"> 测试左边会随右边浮动而浮动，测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动测试左边会随右边浮动而浮动测试左边会随右边浮动...

html左右两栏高度相同,DIV+CSS左右两列自适应高度的方法

weixin_31842715的博客

06-21

846

我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。下面给出最终的效果图：具体代码如下所示：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xht...

html中的float布局规律,css简单布局（左侧固定右侧自适应）

weixin_34649372的博客

06-28

713

在进行网页布局的时候，很多时候需要时候需要实现左侧和右侧分列的页面布局，此文列举了几种多栏自适应布局的方法。。。1.首先举例一种最简单的方法，利用浮动(或者绝对定位)的元素脱离文档属性，加上margin外边距方法实现左右并排列浮动代码：.left{float:left; background-color:green; width:200px; height:100px;}.right{heigh...

纯CSS写正方形自适应宽高，且左侧高与正方形高保持一致

weixin_34019929的博客

09-21

先上图虽然写法有点暴力，但是效果还是可以的，哈哈哈哈哈html:<div class="box"> <div class="left"> <div class="zfxCon" style="">leftleftleftleftleftleftleftleftleftleftleftleft</div...

布局（左边的div随着右边div的高度变化而变化）

weixin_30815469的博客

02-11

2954

今天同学问了一个左边div的高度随着右边div的高度变化而变化的问题。开始想了想有点蒙。中间试着用height：100%；试过发现并不可行，因为高度百分比必须有确切的祖先元素（即设置了px）才可以。由于今天晚上正在团建，回来都12点多了。然后怎么也睡不着就做做这个吧，发现一坐下来安心的想问题，竟然迎刃而解了。我用到的方法是1父元素设置position:relative;2左边的div设置pos...

CSS实现列高度自适应的五种技术解析

"解决列高度自适应(相同)的五种方法" 在网页设计中，尤其是在布局复杂的网页时，保持多列元素具有相同的高度是非常重要的，这样可以使页面看起来更加整洁和美观。以下介绍五种解决列高度自适应（相同）的方法： 1....