0

所以这是我碰到的一个树桩。

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

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

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

有任何想法吗？

谢谢！-戴夫

4

5 回答 5

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>
于 2009-04-06T21:12:00.180 回答
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();
    });

 });

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

于 2009-04-06T21:28:25.367 回答
0

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

于 2009-04-07T13:31:37.487 回答
0

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

几个提示：

  1. 媒体查询
  2. 使用%而不是像px这样的固定值
于 2012-11-08T22:10:40.130 回答
-1

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

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

于 2009-04-06T20:20:05.937 回答