javascript - 半响应式 css 布局(取决于宽度和高度的其余部分)

Question

您好，我需要您的建议。我有 3 个 div - 一个具有绝对大小 X 和 Y，我希望另外 2 个取决于窗口宽度和高度的其余部分。我也想实现粘附元素(margins，或 padding 0？)

我现在正在使用 jquery 和 setwidth、setheight 进行此操作，但这并没有产生好的效果。

$("#console").height(window.innerHeight - gameCanvas.height - 19);
$("#menu").height(gameCanvas.height);
$("#menu").width(window.innerWidth - gameCanvas.width - 6);

抱歉，我是 CSS 新手，无法为我的问题搜索好的答案

#menu是右上元素

#console is down 元素

#gameCanvas 是左上元素

请帮助我，我该如何实现？只能用css实现吗？

Answer 1

这很可能仅使用 CSS 就可以完成。看看这是否适合您:

#gameCanvas{
  width:1024px;
  height:512px;
  float:left;
}
#menu{
  height:512px;
}
#console{
  clear:both;
  height:calc(100vh - 512px);
}

我使用calc 和vh 来设置#console 的高度。该部分可能必须使用 javascript 来完成，以确保出色的浏览器支持。以上代码should work在 90% of the browsers .