Question

尝试仅使用CSS执行此操作。

左侧有一个画布，我希望在调整窗口大小时缩小宽度和高度。希望中心和右边的div在高度上缩小以匹配画布。不要让中心和右边的div在画布下移动。

<div class="container">
  <div class="left">
      <canvas id="draw" width="250" height="300"></canvas>
  </div>
  <div id="center" class="center"></div>
  <div id="right" class="right"></div>
</div>

小提琴：https://jsfiddle.net/mrx6zk27/

任何帮助将不胜感激。期待我可能需要JavaScript来协调高度，但希望尽可能地减少JavaScript。

更新：使用表格布局小提琴（不起作用）：https://jsfiddle.net/mrx6zk27/2/

Answer 1

我很难使用flexbox，这需要为此解决方案略微更新标记中的中心和右边div。请参阅以下代码段和演示。

<强> jsfiddle

var c = document.getElementById("draw");
ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 300);
ctx.fillStyle = "white";
ctx.font = "bold 40pt Arial";
ctx.fillText("CANVAS", 10, 100);

tmp = "";
for (var i = 0; i < 100; i++) {
    tmp += "<p>" + i + "</p>";
}

document.getElementById("center").innerHTML = tmp;
document.getElementById("right").innerHTML = tmp;

.container {
    max-width: 650px;
    margin: 0 auto;
    border: 1px solid black;
    display: flex;
}
.container > div {
    position: relative;
    min-width: 0;
}
.left {
    max-width: 250px;
    width: auto;
}
.left canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
.center {
    flex: 0 0 200px;
    overflow-y: scroll;
    background-color: blue;
}
.right {
    flex: 0 0 200px;
    overflow-y: scroll;
    background-color: green;
}
.scroll {
    position: absolute;
    width: 100%;
}

<div class="container">
    <div class="left">
        <canvas id="draw" width="250" height="300"></canvas>
    </div>
    <div class="center"><div id="center" class="scroll"></div></div>
    <div class="right"><div id="right" class="scroll"></div></div>
</div>

Answer 2

不确定这是否是你想要的，但我认为你使用display：table。

<div id="container" style="display: table; width:100%;">
    <div style="display: table-cell; background-color: red; width:-100%; height:200px"></div>
    <div style="display: table-cell; background-color: blue; width:300px;"></div>
    <div style="display: table-cell; background-color: green; width: 300px;">     </div>
</div>

http://jsfiddle.net/8mpx1kok/2/

3 DIV相同的高度。使用窗口

2 个答案: