Javascript 流体要素与溢流问题
这是我碰到的一个树桩 我正在设计一个。。。事情它根据浏览器窗口调整大小，顶部有一些控件，底部有一个相当大的列表。不管怎么说，它基本上是一个表单元格，它的大小随浏览器窗口的大小而变化，它的大小是文档大小，高度为130像素，宽度为50像素。我想让它做的是，当该单元格中的内容列表比该单元格大时，它会使用css的overflow:auto滚动 问题是，我无法让它这样做，只能使整个文档滚动。目前，该单元格除了valign:top之外没有其他属性，并且其中只有一个div（列表元素写入该div），并且设置为overflow:auto。然而，当列表变长时，它只是放大整个文档 我不想给它一个静态的大小，因为它的大小与页面 有什么想法吗 谢谢！Javascript 流体要素与溢流问题,javascript,html,css,fluid,Javascript,Html,Css,Fluid,这是我碰到的一个树桩 我正在设计一个。。。事情它根据浏览器窗口调整大小，顶部有一些控件，底部有一个相当大的列表。不管怎么说，它基本上是一个表单元格，它的大小随浏览器窗口的大小而变化，它的大小是文档大小，高度为130像素，宽度为50像素。我想让它做的是，当该单元格中的内容列表比该单元格大时，它会使用css的overflow:auto滚动 问题是，我无法让它这样做，只能使整个文档滚动。目前，该单元格除了valign:top之外没有其他属性，并且其中只有一个div（列表元素写入该div），并且设置为o
-戴夫我认为iFrame会有帮助。将你的“东西”放入一个基本URL，然后使用另一个带有iFrame的页面来加载它。当“东西”的大小变得疯狂时，滚动条会出现，但你的外部页面不会受到影响
一个旧的时尚框架应该也能起作用，但iFrame更有趣……我不确定我是否理解正确，但这里有一个尝试，可以给你一些想法
<head>
<title>Test</title>
<style>
div.outer {
background-color: red;
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
}
div.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>
</body>
试验
外分区{
背景色：红色；
位置：绝对位置；
顶部：40px；
底部：40px；
左：40px；
右：40px；
}
内分区{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
溢出：自动；
背景色：浅绿色；
}
在“插入”选项卡上，库中包含与文档整体外观协调的项目。您可以使用这些库插入表、页眉、页脚、列表、封面和其他文档构建块。创建图片、图表或图表时，它们还与当前文档外观相协调。
通过从“常用”选项卡上的“快速样式库”中选择选定文本的外观，可以轻松更改文档文本中选定文本的格式。也可以使用“主页”选项卡上的其他控件直接格式化文本。大多数控件提供了使用当前主题的外观或使用直接指定的格式的选择。
要更改文档的整体外观，请在“页面布局”选项卡上选择“新建主题元素”。要更改快速样式库中的可用外观，请使用“更改当前快速样式集”命令。“主题库”和“快速样式库”都提供了重置命令，因此您可以始终将文档的外观还原为当前模板中包含的原始外观。
buti-oxa的解决方案非常好，但在Internet Explorer中不起作用。
对于跨浏览器解决方案，需要为包含列表的div指定固定高度。您不能只使用css，因为要指定的高度取决于浏览器窗口的高度。
但是您可以使用一个简单的javascript函数来动态地将高度分配给div。
下面是一个使用jQuery的示例：
function resizeDiv(){
var h = $(window).height(); //maybe the window height minus the header and footer height...
$("#yourDivId").css("height", h + "px");
}
加载页面和用户调整窗口大小时，应调用此函数：
$(document).ready(function(){
resizeDiv();
$(window).resize(function(){
resizeDiv();
});
});
您可以在我发布的演示页面中看到这一点（调整窗口大小以进行测试）：
< p>如果我没有错，你的内容只是文本，你可以添加包属性，虽然这在Firefox中不起作用，但是你可以把WBR添加到你的文本 < P>我认为你应该考虑流体布局设计模式。
两个提示：
媒体查询
使用%代替固定值，如px
嗨，谢谢你的回复。iframe确实有用，但正如你所说，它们是老式的，我想重新设计一下。普通的旧框架是旧时尚，iframe是新的和令人兴奋的：-）iframe不是新的和令人兴奋的。好吧，不是那么新（除非你把它们与框架比较），但仍然令人兴奋：-）你能解释一下你的意思吗“使整个文档滚动”和“放大整个文档”“您能否发布一些显示此问题的示例代码？我有一些想法，但我无法再详细地猜测它们是否适用于您。：-）@alexmeia我在IE为我工作。不过，我运行IE8。您有早期版本吗？不确定这是否特别有用，因为它可能会导致每次浏览器调整大小时重新显示和重新绘制。