Html CSS Divs%宽度

我需要创建CSS div

• 顶部上方一个用于收割台（全宽）
• 左边一个（180px）用于垂直菜单
• 右边一个是主要内容

左侧的菜单将是一个iframe，然后右侧的菜单也将是一个iframe

我目前有以下代码：

<style type="text/css">
body,html {
    height:98%;
}
#top-bar {
    width:100%;
    padding:10px 10px 10px 10px;
    margin:0 0 10px 0;
    border-bottom:solid 1px #000000;
    top:0;
    left:0;
}
#left-bar {
    width:170px;
    display:inline;
    float:left;
    position:fixed;
    z-index:999;
}
#right-bar {
    margin-left:180px;
    width:auto;
    display:inline;
}
#space {
    width:100px;
    height:120px;
}
</style>

<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
  <tr>
    <td><a href="index.php"><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
  <tr>
    <td colspan="2"><hr /></td>
  </tr>
</table>

<div id="space"></div>

<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>

<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>

正文，html{
身高：98%；
}
#顶杆{
宽度：100%；
填充：10px 10px 10px 10px；
裕度：0 10px 0；
边框底部：实心1px#000000；
排名：0；
左：0；
}
#左栏{
宽度：170px；
显示：内联；
浮动：左；
位置：固定；
z指数：999；
}
#右栏{
左边距：180像素；
宽度：自动；
显示：内联；
}
#空间{
宽度：100px；
高度：120px；
}
你好|

但右边的内容似乎在左边的菜单下

我需要顶部标题（当前在表格中）在滚动时不移动，左侧菜单栏也一样，并且需要为%，以便它可以适应不同大小的屏幕

---

有人知道我可以用它做什么吗？

首先，将样式移动到单独的样式表中，并从页面的

链接到此样式表。不要使用

元素，因为它很难维护，并且会导致跨页面复制。

元素不应位于页面的

中

另外，不要将表格用于布局。这不是语义

将浮动元素内联是没有意义的。它不会是内联的。如果这些内联元素没有浮动，则不会应用您指定的宽度。另外，不要在元素上使用

样式

属性-使用CSS

---

这些建议可能无法解决您的具体问题，但目前一切都有点混乱，因此我认为您现在有更大的问题需要解决…

尝试以下更改

<div id="left-bar">
   <iframe src="image.png" width="100%" height="100%" frameborder="0"   scrolling="auto"></iframe>
</div>
<div id="right-bar">
   <iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>

#left-bar {
   width: 20%;
   ........
}
#right-bar {
   width: 80%;
   .......
}

#左栏{
宽度：20%；
........
}
#右栏{
宽度：80%；
.......
}

---

注意：切勿使用表格来对齐页面中的内容。始终将div与.css文件中定义的css一起使用，并为div标记定义适当的“class”属性。

好的，谢谢你-我能做些什么来获得它？我需要什么？