我有一个 Canvas 元素，我希望它是一个正方形 - 宽度设置为等于高度。
这工作正常，但是当我在我的显示器上尽可能地扩展我的窗口高度时，相应的宽度增长将同级 Canvas 元素推离屏幕并出现水平滚动条。
我想保持对中心 Canvas 的尺寸控制，同时动态调整其他 Canvas 的尺寸——如果它们离开屏幕则缩小。
<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 但没有结果。
最佳答案
这是您要找的吗？
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>关于javascript - 强制 flexbox div 收缩以保持所有元素适合屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42217205/