5

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

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

图片：在此处输入图像描述

4

2 回答 2

2

像这样的东西：

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

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

于 2012-05-18T13:29:39.297 回答
0

一种javascript方法。

在这里，我创建了您需要的布局。检查此链接。

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

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

<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 方法也可以。

干杯！！！

于 2012-05-18T17:42:00.910 回答