Согнуть коробку с двумя делителями внутри, а внутри - с холстом - PullRequest
0 голосов
/ 04 октября 2019

Scenerio:

Вот мой 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>

Вот js для того же.

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

new ResizeObserver(outputsize).observe(textbox);

Вотcss для того же.

#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 имеет 2 дочерних элемента, а именно sibling и canvasParent, у брата есть фиксированная ширина, тогда как canvasParent примет оставшуюся ширину. В настоящее время он ведет себя не так, как ожидается, когда мы уменьшаем ширину окна, тогда первый div(sibling) уменьшает его ширину, а ширина другого div постоянна, тогда как я хочу, чтобы элемент div оставался на своей фиксированной ширине, как только пользователь уменьшит ширину окна идругой div для уменьшения / роста.

Вот JSBIN для того же самого, имеющего css, js для описанного scenerio.

Ожидание:

Как только мы изменим размер окна, первый div (sibling) сохранит свою фиксированную ширину, а другой div с холстом внутри будет уменьшаться / увеличиваться в зависимости от изменения размера окна, а холст внутри него будет иметь родительскую ширину (Логика для холста, чтобы взять его родительский div уже записана в js-файле.)

И изменение размера работает отлично, как только я удаляю элемент canvas из второго div. Вот JSBIN , которые показывают, что первый div остается на фиксированной ширине, а другой div уменьшается / увеличивается, когда пользователь уменьшает ширину окна.

1 Ответ

1 голос
/ 04 октября 2019

Вы можете использовать CSS Grid , чтобы получить эффект:

#textbox {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ". .";
  grid-column-gap: 10px;
}

#sibling {
  background: red;
}

#canvasParent {
  background: black;
}

#myCanvas {
  width: 100%;
  background: pink;
}
<div id="textbox">
  <div id="sibling"></div>
  <div id="canvasParent">
    <canvas id="myCanvas"></canvas>
  </div>
</div>

Вы можете создать Сетки CSS здесь: https://grid.layoutit.com/?id=2NkZ4JY

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...