css flex左右布局，左右如何同高？
css flex 布局，页面分为上下两部分，下面通过 flex: 1; 撑开，并且 overflow-y: auto；下面又分为左右布局，左右高度不一定，想要设置一个边框分割左右，但是边框始终到最底部；
下半部分左右边框高度能够到自动撑开的高度
https://codesandbox.io/p/devbox/flexbu-ju-zi-dong-cheng-gao-8...
共有3个答案
去掉.wrap {
height: 100%;}
此时，那个flex:1,overflow-y: auto; .wrap上的flex布局也没有用了。
但这种情况下上面部分就随着滚轮上移了，将上面部分改为fixed或sticky布局就可以了。
基于当前结构的方法:
给.rht和.lft盒子添加:
.rht { height: min-content;}这样这个弹性盒子就会被子盒子内容撑开
然后使用JQuery 获取rht的高度赋值给.lft的子盒子div:
let h = $(".rht").height() + 'px';$(".lft div").css({ height: h});使用新的结构实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; border: 0; margin: 0; } html, body, .wrapper { height: 100%; } .top { height: 100px; width: 100%; background: #e3e3e3; position: fixed; top: 0; } .top2 { height: 100px; width: 100%; background: #e3e3e3; } .content { display: flex; height: 100%; height: min-content; } .lft { flex: 1; } .rht { width: 600px; flex-shrink: 0; border-left: 1px solid red; height: min-content; background: red; } </style></head><body> <div class="wrapper"> <div class="top">nav</div> <div class="top2"></div> <div class="content"> <div class="lft"> <div style="height: 100%; background: #d1b0b0;">lft</div> </div> <div class="rht"> <div style="height: 300px;">rht 1</div> <div style="height: 300px;">rht 2</div> <div style="height: 300px;">rht 3</div> <div style="height: 300px;">rht 4</div> <div style="height: 300px;">rht 5</div> <div style="height: 300px;">rht 6</div> </div> </div> </div></body><script></script></html>
在 CSS Flex 布局中，要实现左右同高的效果，可以使用 align-items: stretch; 来确保子元素在交叉轴上（即垂直于主轴）撑满容器的高度。
首先，确保父容器设置 align-items: stretch;，这样它的子元素就会在交叉轴上撑满容器的高度。
然后，为了使左右边框能够撑开到自动撑开的高度，可以给左右子元素设置一个边框，并使用 box-sizing: border-box; 来保证边框不会增加元素的总高度。
以下是示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex 布局示例</title> <style> .container { display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } .left, .right { flex: 1; box-sizing: border-box; border: 1px solid #ccc; } </style></head><body> <div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div></body></html>这样，左右子元素就会撑开到容器的高度，并且左右边框会延伸到容器底部。
-
本文向大家介绍jQuery Easyui实现左右布局，包括了jQuery Easyui实现左右布局的使用技巧和注意事项，需要的朋友参考一下 EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easy
-
Framework7 完全支持从右向左的语言。你只需要增加一个额外的CSS文件即可： <!DOCTYPE html> <html> <head> ... <title>My App</title> <!-- Path to Framework7 Library CSS--> <link rel="stylesheet" href="path/to/framewo
-
我正在使用BorderPane实现JavaFX中的布局。 假设BorderPane的maxPrefWidth设置为1000。左窗格中有一个按钮，右窗格中有一个按钮。在中心窗格中，还有一个大小未知的按钮。 如果：中间元素的宽度是500，那么左右节点的宽度应该是250。 如果：中间元素的宽度是600，那么左右节点的宽度应该是200。 有没有一种方法告诉左右窗格自动增长（水平）直到中心节点的被击中？
-
问题内容： 使用典型的CSS，我可以在两列之间向左浮动另一列，并在两者之间留出一定的间距。我该如何使用flexbox？ 问题答案： 您可以添加到父元素。这样做时，子级flexbox项将与相对侧对齐，并在它们之间留有空间。 您也可以添加到第二个元素以使其向右对齐。
-
左右菜单例子，类似于Facebook的ViewControllerContainer，在一个UIViewController上面加载另外一个UIViewController。点击主视图的导航条左右两边按钮，就会从左右两边分别滑动出子视图。 [Code4App.com]
-
如何以功能性方式使用vavr的“左”或“右”？ 我有一个方法，它返回一个 到目前为止，我找到的最接近的解决方法是biMap（）方法，它看起来像 可以说，映射函数应该用于映射而不是副作用，因此即使它有效，我也在寻找替代方案。