Fatal编程技术网
  • javascript/
  • Javascript 内有2个div的弹性盒内有一个帆布盒

Javascript 内有2个div的弹性盒内有一个帆布盒

javascript css

Javascript 内有2个div的弹性盒内有一个帆布盒,javascript,css,flexbox,addeventlistener,window-resize,Javascript,Css,Flexbox,Addeventlistener,Window Resize,场景： 这是我的HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id='textbox'> <d

场景：

这是我的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id='textbox'>
   <div id="sibling"></div>
    <div id='canvasParent'>
        <canvas id="myCanvas" style="border:1px solid #000000">
    </canvas>
    </div>
   </div>
</body>
</html>
这里是同样的css

function outputsize() {
  console.log(canvasParent)
  canvasParent.clientWidth =  textbox.clientWidth - sibling.clientWidth;
  myCanvas.width = canvasParent.clientWidth;
}
outputsize();

new ResizeObserver(outputsize).observe(textbox);

#textbox {
  display:flex; 
  flex-direction:row;
  border:1px solid green;
  flex:1;
}

#sibling {
  width:200px;
  border:4px solid yellow;
}

#canvasParent {
  border:2px solid red; 
  flex:1;
}
第一个
div
有两个子div，即
sibling
和
canvasParent
，sibling具有固定宽度，而
canvasParent
将采用剩余宽度。 当前，当我们减小窗口宽度时，它的行为不符合预期，然后第一个
div（同级）
正在减小其宽度，而另一个div的宽度是恒定的，而我希望同级div在用户减小窗口宽度和另一个div收缩/增长时保持其固定宽度

对于同样的场景，这里是使用css和js的方法

期望值：

一旦我们调整窗口的大小，第一个
div（同级）
将保持其固定的宽度，而另一个具有画布的div将根据窗口的大小进行收缩/增长，其中的画布将采用其父宽度（画布采用其父div的逻辑已写入js文件）

一旦我从第二个div中删除canvas元素，调整大小就可以了。
以下是显示第一个保持固定宽度的div，以及用户缩小窗口宽度后收缩/增长的其他div的示例。

您可以使用CSS网格来获得效果：

#文本框{
显示：网格；
网格模板列：200px 1fr；
网格模板行：1fr；
网格模板区域：“…”；
栅柱间隙：10px；
}
#兄弟姐妹{
背景：红色；
}
#拉票{
背景：黑色；
}
#我的画布{
宽度：100%；
背景：粉红色；
}
@Paulie\u D我已经用这个场景的js和css片段更新了这个问题。