Question

我有一个画布元素，我希望它是一个等于高度的方形宽度设置。

这样可以正常工作，但是当我在显示器上尽可能地扩展窗口高度时，相应的宽度增长会将兄弟画布元素推离屏幕并显示水平滚动条。

我希望在动态调整其他画布的同时保持对该中心画布的大小控制 - 如果它们离开屏幕则会缩小。

<html>
<center>
<body bgcolor="#4c5959">
<link rel="stylesheet" href="style.css">
<center>
<div class="container">
<canvas id="info" class="panel"></canvas>
<canvas id="board" class="panel"></canvas>
<canvas id="actions" class="panel"></canvas>
</div>

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = board.width/board.height;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

  window.display.w = height;;
  window.display.h = height;
}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
</script>

.container {
  display:flex;
  height:100%;
  width:100%;
}

.panel {
  display:flex;
}

#board {
  width:50%;
  height:100%;
  background:#9b59b6;
}

#info {
  width:25%;
  height:100%;
  background:#3498db;
}

#actions {
  width:25%; 
  height:100%;
  background:#1abc9c;
}

我怎样才能做到这一点？我尝试在外部容器中使用flex-basis, flex-growth, display:inline-flex但没有结果。

Answer 1

这是你要找的吗？

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = 1;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);

body {
  background-color: #4c5959;
  margin: 0;
}
*{
  box-sizing: border-box;
}
.container {
  display:flex;
  height:100vh;
  width:100vw;
}

.side {
  flex: 1 1 25%;
  width: 25%;
}
.side canvas {
  height: 100vh;
  width: 100%;
  float: left;
}

#board {
  background:#9b59b6;
  width: 50vw;
  height: 100%;
}

#info {
  background:#3498db;
}

#actions {
  background:#1abc9c;
}

<div class="container">
  <div class="side">
    <canvas id="info"></canvas>
  </div>
  <canvas id="board"></canvas>
  <div class="side">
    <canvas id="actions"></canvas>
  </div>
</div>

强制flexbox div缩小以保持所有元素适合屏幕

1 个答案: