javascript - 使浏览器自动固定布局的最佳实践

Question

比如我想做这样的布局:

'header' 可以有一个固定的高度(例如:200px)

左侧的“菜单”div 可以有固定宽度(例如:300px)。

现在，我希望右边的主div可以占据其余空间的所有宽度和高度。

此外，如果用户调整浏览器大小，主div的大小也应相应调整，总之，我不想随时显示滚动条。

使用 javascript 是常见的方式，但可能会很困难。

例如，使用这个(伪代码):

window.onresize=function(){
 main.style.width=document.clientWidth-left.style.width;
}

但是元素的边框呢？

main.style.width=document.clientWidth-left.style.width-left.style.borderLeftWidth-left.style.borderRightWidth-......;

但在不同的浏览器中，'element.style.width'可能包含或不包含浏览器的宽度。

所以我想知道是否有任何想法可以避免使用 js 计算？

Answer 1

使用 CSS 并查看 columns with equal height .如果您不想在浏览器调整大小时滚动，那么我建议使用绝对定位。但这并不是网络开发和设计的 native 。