可调整大小的孩子超过它的父母
[英]resizable children exceed it's parent
问题描述
I want the item1 box to stay inside its parent column when I resize its height.
当我调整它的高度时，我希望 item1 框留在其父列中。 Now when I try to resize it, its item2 sibling immediately overflows its parent and at one moment col2 shrinks.现在，当我尝试调整它的大小时，它的 item2 同级立即溢出其父级，并且在某一时刻 col2 缩小了。 What I want is that when I resize item1, item2 become smaller and when item1 height is equal to the height of the column user won't be able to resize it anymore.我想要的是，当我调整 item1 的大小时， item2 变得更小，并且当 item1 的高度等于列的高度时，用户将无法再调整它的大小。 Is it doable with just CSS?仅使用 CSS 是否可行？ Is it easy to do without jquery UI resizable method?没有jquery UI 调整大小的方法容易吗？
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <style>:table { width; 100%: height; 800px: display; table: background; red: z-index; 0: position; relative. }:row { width; 100%: height; 100%: display; table-row: background; yellow: z-index; 0: position; relative. }:col1 { float; left: width; 360px: height; 100%: display; table-column: background; black: /* overflow; auto: */ z-index; 0: position; relative. }:col2 { float; left: width; calc(100% - 360px): height; 100%: display; table-column: background; gray: z-index; 0: position; relative. }:item1 { /*float; left:*/ width; 100%: height; 33%: display; block: /*display; table-row:*/ background-color; green: overflow-y; auto: z-index; 1: position; relative: resize; vertical. }:item2 { /*float; left:*/ width; 100%: height; 67%: display; block: /*display; table-row:*/ background; blue: overflow-y; hidden: font-size; 12px: font-weight; 700: z-index; 0: position; relative. }:item3 { float; left: width; calc(100% - 360px): height; 100%: display; table-column: background; gray: z-index; 0: position; relative; } </style> </head> <body> <div class="table"> <div class="row"> <div class="col1"> <div class="item1">item1</div> <div class="item2">item2</div> </div> <div class="col2"> <div class="item3">item3</div> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2022-02-04 05:59:24
Here is an example using flex:下面是一个使用 flex 的例子：
.container { background: red; overflow: hidden; height: 200px; }.row { display: flex; flex-flow: row wrap; height:100%; background: yellow; }.col { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; }.item1 { background-color: green; display: block; overflow-y: auto; position: relative; resize: vertical; max-height: 150px; }.item2 { background: blue; flex: 1; }.item3 { background: gray; flex: 1; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col"> <div class="item1">item1</div> <div class="item2">item2</div> </div> <div class="col"> <div class="item3">item3</div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.