使用div创建混合像素/百分比布局

Question

我正在尝试制作页面布局，如附图所示。问题是我无法正常工作。我花了半天的时间试图让它工作，但没有成功。我只想要一个固定宽度的div用于菜单，然后在两个div旁边创建列，每列占用剩余页面宽度的一半。高度都需要依赖内容。

有人有想法吗？我可以找到关于这种混合的perecentage /像素布局的很多信息，但我无法想象这很难。

图片：

Answer 1

类似的东西：

<style type="text/css">
.container
{
  padding-left: 160px;
  position: relative;
}
.leftmenu
{
  width: 160px;
  height: 200px;
  background: red; /* For demo purposes */
  position: absolute;
  top: 0;
  left: 0;
}
.width50
{
  width: 50%;
  float: left;
}
.left-content
{
  height: 300px;
  background: green /* For demo purposes */
}
.right-content
{
  height: 150px;
  background: blue   /* For demo purposes */
}
.clear
{
  clear: both;
}
</style>
<div class="container">
  <div class="leftmenu"></div>
  <div class="content">
    <div class="width50 left-content"></div>
    <div class="width50 right-content"></div>
    <div class="clear"></div>
  </div>
</div>

这只是内部容器（没有页眉或页脚）

Answer 2

javascript方法。

我在这里创建了您需要的布局。 Check this link

重新调整浏览器大小并刷新它。你可以看到它正在工作！

我使用以下脚本查找屏幕分辨率，然后计算内容宽度。

<script type="text/javascript">
wscreen = window.innerWidth; //Determine screen resolution
content_width = (wscreen - 160); //Adjusting the screen
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS
</script>

纯CSS方法也可行。

干杯!!!