Question

所以，我最终想要实现的是：

https://s17.postimg.org/7zkpt511r/imgdivs.png

到目前为止：

<style type="text/css">
.wrapper{
  height: 100%;
  width: 100%;
}
.left{
  float: left;
  background: silver;
  height: 100%;
}
.right{
 background: silver;
  float: right;
  height: 100%;
}
canvas{
position: absolute;
height: 100%;
}
</style>


<div class = "wrapper">
  <div class = "left"></div>
  <canvas id="canvas"></canvas>
  <div class = "right">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var WIDTH = 200; //could be anything, comes from previous calculations
$('#canvas').css("width", WIDTH);
$('#canvas').css("left", (window.innerWidth - WIDTH) / 2);
$('.left').css("width", (window.innerWidth - WIDTH) / 2);
$('.right').css("width", (window.innerWidth - WIDTH) / 2);

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, WIDTH, window.innerHeight);

</script>

所以稍微解释一下，中间的画布是动态的，它的宽度（用javascript计算）并预先决定它的高度（100％），它放在中间页面，并且它的两个div应该相应地并且相等地延伸并填充页面的其余部分。我的代码中有很多问题; div有时会在另一个下面溢出，画布出于某种原因并不能填充它的整个尺寸等等。

我害怕尝试在flexbox中这样做，因为旧浏览器不能正确支持它，我需要所有浏览器支持。谢谢你的时间。

Answer 1

要使div高度起作用，您需要将其添加到css

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Answer 2

我一直在this jsfiddle尝试，我得到了一个有效的解决方案。我在包装器中添加了float:left;，并删除了所有height: 100%;，因为浏览器忽略了它们。我只是使用JS来根据window元素设置高度。

我也删除了position: absolute;上的canvas，因为不需要做你需要的事情。无论如何，如果您将其用于其他目的，我的建议是将canvas插入div class="center"（例如）并将绝对位置应用于该div内的画布。

最后我添加了$(document).ready(function(){ ... });以确保在页面完全加载时执行JS代码。

编辑 div计算是使用width: calc(50% - canvasWidth/2);进行的，这样当您调整窗口大小时它也可以正常运行。但我最重要的是使用WIDTH正在产生错误，但让$("#canvas").outerWidth()正常工作......

Answer 3

不要使用位置：绝对不是布局的好方法

您可以考虑使用display：flex相同并考虑使用视口宽度和高度vw / vh

当你给你的div宽度100％和高度100％没有任何效果使它工作你必须设置html，body {width：100％，height：100％}这不是一个好习惯，而是你可以使用vw / vh

检查此代码段

＆＃13;

.wrapper {
  height: 100vh;
  border: 1px solid black;
  display: flex;
  width: 100vw;
}
.left {
  border-right: 1px solid;
  background: silver;
  height: 100%;
  width: 20%;
}
.right {
  background: silver;
  width: 30%;
  height: 100%;
  border-left: 1px solid;
}
canvas {
  width: 60%;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="left"></div>
  <canvas id="canvas"></canvas>
  <div class="right">
  </div>

＆＃13;

没有显示的解决方案：flex

＆＃13;

.wrapper {
  height: 100vh;
  border: 1px solid black;
  position: relative;
  width: 100vw;
}
.left {
  border-right: 1px solid;
  background: silver;
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0;
}
.right {
  background: silver;
  width: 30%;
  height: 100%;
  border-left: 1px solid;
  float: right;
}
canvas {
  width: 60%;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="left"></div>
  <canvas id="canvas"></canvas>
  <div class="right">
  </div>

＆＃13;

希望有所帮助

Answer 4

CSS：

body {
  margin:0;
  height:100vh;
}
.wrapper{
 display:table;

  height: 100%;
  width: 100%;
 background-color:pink;
}
.left{
 display:table-cell;
  background-color: gray;
  height: 100%;

}
.right{
 background-color: blue;
display:table-cell;
  height: 100%;

}
canvas{
display:table-cell;
height: 100%;
}

JS：

var WIDTH = 234; //could be anything, comes from previous calculations
$('#canvas').css("width", WIDTH+'px');
$('.left').css("width", (window.innerWidth - WIDTH) / 2+'px');
$('.right').css("width", (window.innerWidth - WIDTH) / 2+'px');


var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

DEMO：https://jsfiddle.net/zd75wq2e/4/

所以，基本上，你很亲密。我已经删除了绝对定位和浮动，而且我更喜欢使用css表。我希望它在旧浏览器中也有很好的支持。并且，是的，如评论中所述，填充问题在js的最后一行中得到解决。

三个div并排导致问题

4 个答案: