半响应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是关闭元素

#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。