Question

我有以下HTML。

<body>

<div class="header"></div>

<div class="navdiv"></div>

<div class="mainarea">

<p></p>
<table>
  <tr>
    <th scope="row">Name</th>
    <th scope="row">Description</th>
    <th scope="row">Created</th>
    <th scope="row">Created By</th>
    <th scope="row">Modified</th>
    <th scope="row">Modified By</th>
  </tr>
</table>

</div>

</body>

我需要一些CSS帮助才能正确构建页面。

我希望标题在我可以做的顶部100％。

但我希望“navdiv”在页面左侧固定为250px。然后使用“mainarea”div将页面的其余部分放在navdiv的右侧。然后我还想让表格延伸到页面的其余部分。

我尝试了几种变体和一些工作，但是我无法让桌子伸展到其余的空间，它只是跳到导航下方，远远超过其他内容或仅限于内容中的内容它

有人可以帮忙吗？

Answer 1

这应该有效：

.header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none;  }

<强>解释

我基本上使用标准的两列overflow: hidden技巧来强制主内容保留在自己的列中（而不是在nav下包装）。主要内容的position: relative是将其设置为表的偏移父级，因此我们可以在表上使用width: 100%将其推送到主区域的宽度。

导航高度，背景颜色和边框仅用于演示目的。

黑客攻击：

没有其他（现代）浏览器需要margin-left: 260px，因为overflow: hidden涵盖了这一点（强制它分为两列）。

然而，在那一点上，该表似乎清楚地显示在导航的底部（再次，仅在IE6中）。这可以通过删除任何默认清除（不确定是否必要）并将其浮动到右侧来解决，因此它不会考虑导航的大小。

Answer 2

有这样的事情，（未经测试）

#header{
  width: 100%;
}
#navdiv{
  width: 250px;
  float: left;
}
#mainarea{
  width: 100%;
  float:left;
  margin-left: 260px;
}
table{
  width: 100%;
  float: left;
  clear: left;
}

Answer 3

您可以使用以下代码。我使用类包装器将您的代码包装在另一个div中。您可以修改值。 navdiv类有250px你想要的。你必须修改mainarea的宽度与百分比。这是根据包装宽度。只需玩一点，您就会发现适合包装纸宽度的正确百分比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stackoverflow code</title>
<style>

.wrapper {
    width:900px;
    height:400px;
}

.header {
    width:900px;
    height:100px;
}

.navdiv {
    width:250px;
    float:left;
    height:100px;
}

.mainarea {
    width:72%;
    float:left;
    height:100px;
}

</style>
</head>

<body>
<div class="wrapper">
<div class="header"></div>

<div class="navdiv"></div>

<div class="mainarea">

<p></p>
<table>
  <tr>
    <th scope="row">Name</th>
    <th scope="row">Description</th>
    <th scope="row">Created</th>
    <th scope="row">Created By</th>
    <th scope="row">Modified</th>
    <th scope="row">Modified By</th>
  </tr>
</table>

</div>
</div>
</body>

</html>

Answer 4

试试这个：？

.header{
  width:100%;
  overflow:hidden;
  }

.navdiv{
  width:250px;
  float:left;
  clear:none;
  margin:0 10px 0 0;
  }

.mainarea{
  float:left;
  clear:none;
  overflow:hidden;
  }

.mainarea table{
  width:100%;
  float:left;
  clear:none;
  }

需要一个表格以适应整个屏幕div与另一个固定宽度div

4 个答案: