Question

html关于CSS排版问题-分栏

请告诉我为何我这样写达不到我要的效果
欲达到效果：
<table id="section">
<tr id="table_row">
<td id="navigation">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>
<iframe id="content" src="index.html">content</iframe>
</td>
</tr>
</table>
我的写法：
html:
<section id="section">
<div id="table_row">
<nav id="navigation">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</nav>
<iframe id="content" src="index.html">content</iframe>
</div>
</section>
CSS:
#body_all{
position: absolute;
width: 100%;
}
#header{
position: relative;
height: 100px;
width: 100%;
}
#section{
display: table;
position: relative;
border-spacing: 5px;
width: 70%;
height: auto;
}
#table_row{
position: relative;
}
#navigetion{
display: table-cell;
position: relative;
width: 20%;
}
ul{
margin: 0;
padding: 0;
list-style-type: none;
display: block;
}
li{
margin: 0;
}
#content{
display: table-cell;
position: relative;
width: 70%;
}
#footer{
position: relative;
height: 200px;
width: 100%;
}
请告诉我如何修改！

Answer 1

楼上的其实可以达到效果，iframe不用滚动条的话，就要用JS来判断里面页面内容的高度了，但是我不知道楼主为什么要用
#body_all{
position: absolute;
width: 100%;
}
position: absolute;
这个属性，这是个弹出层吗？必须浮动在某个层之上？
position: relative;
这个属性写的太多了，浪费资源，给个建议，尽量用标签自带的属性来完成页面，可以让你的代码看起来简洁一些。

追问

可否对上述做个示范((我是菜鸟

Answer 2

#navigation{
display: inline-block;
position: relative;
width: 20%;
}
#content{
display: inline-block;
position: relative;
width: 70%;
}

这两个的dsiplay属性改为inline-block，另外，上面第一个id你拼错了；

追问

选单会跑掉...
而且为什么要这样改？
可以告诉我要怎麼改iframe可以不用scrollbar而是自动延展网页高度吗？