表格单元格内可滚动的 DIV
我知道，我的答案是经典的，但我找不到正确的解决方案，不是在这里，也不是使用谷歌。我正在尝试使用表格创建布局。我希望 table#layout 占屏幕的 100%（而不是更多），并且 #content-td 可以滚动。我的解决方案在 FF/Chrome/Safari 中工作正常，但在 IE 中存在一些问题。如果 #content-td 有 height=100% IE 会将高度设置为等于表格高度（这是错误的，因为我有 #header） 。当我从 #content-td 中删除 height=100% 时，IE 将崩溃此销售。有没有不用javascript的解决方案来修复div的高度？
<!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>
<style type="text/css">
html, body, #layout {height:100%; width:100%; margin:0; padding:0; overflow:hidden;}
#wrapper {overflow-y:scroll; position:relative; height:100%}
#content {position:absolute;}
/* highlight areas */
#header {background-color:#BADBAD;}
#sidebar {background-color:#DABDAB;}
#wrapper {background-color:#CD5C5C; font-size:40px;}
</style>
</head>
<body>
<table id="layout" border="1" cellpadding="0" cellspacing="0">
<tr height="1%">
<td colspan="2" id="header">Header</td>
</tr>
<tr valign="top" height="100%">
<td id="content-td" width="70%" height="100%">
<div id="wrapper">
<div id="content">
Here is long text I want to scroll down<br/>
Here is long text I want to scroll down<br/>
Here is long text I want to scroll down<br/>
</div>
</div>
</td>
<td id="sidebar" width="30%">Sidebar</td>
</tr>
</table>
</body>
</html>
没有文档类型它工作正常，但我想要一个有效的文档。这是测试页面。
I know, my answer is a classic, but I cannot find proper solution, not here, nor using google. I'm trying to create layout using table. I wish the table#layout to be 100% of the screen (not more) and #content-td with scrolling. My solution works fine in FF/Chrome/Safari, but have some issues in IE. If #content-td has height=100% IE will set the height equals to table height (it's wrong, because I have #header). When I remove height=100% from #content-td IE will collapse this sell. Is there solution without javascript to fix div's height?
<!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>
<style type="text/css">
html, body, #layout {height:100%; width:100%; margin:0; padding:0; overflow:hidden;}
#wrapper {overflow-y:scroll; position:relative; height:100%}
#content {position:absolute;}
/* highlight areas */
#header {background-color:#BADBAD;}
#sidebar {background-color:#DABDAB;}
#wrapper {background-color:#CD5C5C; font-size:40px;}
</style>
</head>
<body>
<table id="layout" border="1" cellpadding="0" cellspacing="0">
<tr height="1%">
<td colspan="2" id="header">Header</td>
</tr>
<tr valign="top" height="100%">
<td id="content-td" width="70%" height="100%">
<div id="wrapper">
<div id="content">
Here is long text I want to scroll down<br/>
Here is long text I want to scroll down<br/>
Here is long text I want to scroll down<br/>
</div>
</div>
</td>
<td id="sidebar" width="30%">Sidebar</td>
</tr>
</table>
</body>
</html>
It works fine without doctype, but I want a valid document. Here is the test page.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为您的第一个错误是想使用表格进行布局。我确信您已经知道其含义，但如果您不知道，那么可能值得在网络上搜索“没有表格的布局”。
听起来您实际上正在寻找的布局是主要内容正常滚动的布局，但侧面导航窗格始终位于屏幕上的固定位置。有趣的是，您的问题的等效解决方案是在 CSS 中使用
position:fixed来保持导航在视图中。例如，您可以创建一个主要内容框和一个导航框，并使用类似的内容（在 Firefox 中测试）：如果这不是您想要的，则提供指向某些示例站点或图表的链接。
I think your first mistake is wanting to use a table for layout. I'm sure you know about the implications of that already, but if you don't, then it's probably worth searching the web for 'layout without tables'.
It sounds like the layout you're actually looking for is one where the main content scrolls as normal, but the side navigation pane is always in a fixed position on-screen. An equivalent solution to your problem, funnily enough is to use
position:fixedin CSS to keep the navigation in view. For instance, you could make a main content box and a navigation box and use something like this (tested in Firefox):If that isn't what you want, then provide a link to some example site or a diagram.