gpt4 book ai didi

html - 表格单元格内的可滚动 DIV

转载 作者:太空宇宙 更新时间:2023-11-03 19:35:25 27 4
gpt4 key购买 nike

我知道,我的回答很经典,但我找不到合适的解决方案,在这里找不到,也没有使用谷歌。我正在尝试使用表格创建布局。我希望 table#layout 是屏幕的 100%(不要更多)并且 #content-td 可以滚动。我的解决方案在 FF/Chrome/Safari 中运行良好,但在 IE 中有一些问题。如果 #content-tdheight=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>

没有 doctype 也能​​正常工作,但我想要一个有效的文档。这是 test page .

最佳答案

我认为您的第一个错误是想使用表格进行布局。我相信您已经知道这意味着什么,但如果您不知道,那么可能值得在网上搜索“没有表格的布局”。

听起来您真正要寻找的布局是主要内容正常滚动的布局,但侧面导航 Pane 始终位于屏幕上的固定位置。有趣的是,您的问题的等效解决方案是在 CSS 中使用 position:fixed 来保持导航可见。例如,您可以制作一个主要内容框和一个导航框,并使用类似这样的东西(在 Firefox 中测试):

body {margin-right:30%;}
#navigation {position:fixed; top:0; right:0; width:30%; height:100%; background:#fcc;}

如果这不是您想要的,请提供指向某些示例站点或图表的链接。

关于html - 表格单元格内的可滚动 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4532360/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com