流体元素和溢出问题答案

【问题标题】：Fluid Elements and Overflow Question流体元素和溢出问题
【发布时间】：2012-11-09 06:10:40
【问题描述】：

所以这是我击中的一个树桩。

我正在设计一个……东西。它根据浏览器窗口调整大小，顶部有一些控件，底部附近有一个相当大的列表。无论如何，它基本上是一个与浏览器窗口大小一致的表格单元格，其大小是文档大小 - 高度为 130 像素，文档大小 - 宽度为 50 像素。我想要它做的是，当该单元格内的内容列表大于该单元格时，它会使用 css 的溢出变为滚动：自动。

问题在于，我无法做到这一点，只能让整个文档滚动。目前，该单元格除了 valign:top 之外没有其他属性，并且其中有一个 div（列表元素写入其中），并且它被设置为 overflow:auto。但是，当列表变长时，它只会放大整个文档。

我不想给它一个静态大小，因为它与页面一起调整大小。

有什么想法吗？

谢谢！ -戴夫

【问题讨论】：

你能解释一下“使整个文档滚动”和“放大整个文档”的意思吗
您能否发布一些显示此问题的示例代码？我有几个想法，但我无法开始猜测它们是否会更详细地为您服务。 :-)

标签： javascript html css fluid

【解决方案1】：

我不确定我是否理解正确，但这里有一个可能会给你一些想法的尝试。

<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>

【讨论】：

@alexmeia 我在 IE 中为我工作。不过，我运行的是 IE8。你有更早的版本吗？

【解决方案2】：

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();
    });

 });

您可以在我发布的这个演示页面中看到这一点（调整窗口大小以进行测试）： http://www.meiaweb.com/test/BMS_DM_NI/

【讨论】：

不确定这是否特别有用，因为它可能会导致每次浏览器调整大小时重新加载和重新绘制。

【解决方案3】：

如果我没记错并且您的内容只是文本，您可以添加 wrap 属性，尽管这在 Firefox 中不起作用，您可以将 wbr 添加到您的文本中

【讨论】：

【解决方案4】：

我认为您应该考虑流畅的布局设计模式。

几个提示：

媒体查询
使用 % 而不是像 px 这样的固定值

【讨论】：

【解决方案5】：

我认为 iFrame 会有所帮助。将您的“事物”放入基本 URL，然后使用带有 iFrame 的另一个页面来加载它。随着“东西”的大小变得疯狂，滚动条出现，但您的外部页面不受影响。

老式框架也应该可以，但 iFrame 更有趣....

【讨论】：

您好，感谢您的回复。 iframe 确实可以工作，但是正如你所说，它们是老式的，我会重新设计设计。
plain-old Frames 是旧时尚，iframes 是新的和令人兴奋的 :-)
iframe 并不新鲜，也不令人兴奋。
好吧，不是很新（除非您将它们与框架进行比较）但仍然令人兴奋:-)