首先我将解释一下到目前为止我所掌握的内容; 始终位于页面中间的动态 Canvas ,它的宽度是通过 javascript 计算得出的,因此可能会有所不同,之后将一些 Flexbox div 添加到其两侧,它们均匀地填充页面的其余部分(其工作方式相同)即使使用 CTRL 调整大小):
https://jsfiddle.net/62g1mqw0/2/
<div class="wrapper">
<div class="divA"></div>
<div class="divB">
<canvas id="canvas"></canvas>
</div>
<div class="divC"></div>
</div>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
}
.wrapper div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid;
}
.wrapper .divB {
border: none;
}
#canvas {
vertical-align:top;
}
</style>
<script>
var canvas = document.getElementById("canvas");
var WIDTH = 500; // This could be anything! it comes from
//previous calculations which I did not include here because they are irelevant
document.getElementsByClassName('divB')[0].style.flex = '0 0 ' + WIDTH + 'px';
var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;
document.getElementById("canvas").style.width = width + 'px';
document.getElementById("canvas").style.height = height + 'px';
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, width, height);
// resize handler Ref: https://developer.mozilla.org/en-US/docs/Web/Events/resize
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 66);
}
}
function actualResizeHandler() {
var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;
document.getElementById("canvas").style.width = width + 'px';
document.getElementById("canvas").style.height = height + 'px';
ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, width, height);
}
}());
</script>
正如你在 jsFiddle 上看到的,总的结果是页面 100% 的宽度和高度都被 canvas 和 flexbox 填充。
现在,在现代浏览器中你不会看到问题,但在旧浏览器中你会看到奇怪的事情发生;一个div float 到下一个,一些黑点等。对我来说,拥有旧浏览器支持非常重要,因为我用cordova编译它,而旧版本的Android用户仍然使用旧浏览器,他们可能会认为我的应用程序很奇怪。我已经在 KitKat 和一些更旧的版本上测试过它,我不知道为什么它们不能正确支持 Flexbox。我添加了 -webkit 行,但仍然没有帮助。我什至不介意采用另一个完全不同的不涉及 Flexbox 的解决方案
最佳答案
通过使用polyfill,您可能会节省大量时间并减少挫败感 - 为了获得完整的浏览器支持,您将完全需要。
最受欢迎的似乎是 Flexibility .
如果您不想走 Polyfill 路线,您可以遵循 this question 中的一些答案。几年前。
关于javascript - 在旧浏览器中显示 Flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40688289/