半響應式CSS布局（取決於其余的寬度和高度）

Question

您好，我需要您的建議。 我有3個div，其中一個的絕對尺寸為X和Y，我希望其他兩個取決於窗口的其余寬度和高度。 我也想實現粘貼的元素（ 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是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才能完成，以確保出色的瀏覽器支持。 上面的代碼應在90％的瀏覽器中運行 。