流体元素和溢出问题

发布于 2024-07-17 04:45:08 字数 411 浏览 8 评论 0原文

这是我碰到的一个树桩。

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

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

我不想给它一个静态大小，因为它的大小与页面有关。

有任何想法吗？

谢谢！ -戴夫

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜司空 2024-07-24 04:45:08

我不确定我理解是否正确，但这里的尝试可能会给您带来想法。

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

I'm not sure I understand correctly, but here's a try that may give you ideas.

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

回复收藏 0 原文

酒绊 2024-07-24 04:45:08

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/

The solution of buti-oxa is very nice, but doesn't work in Internet Explorer.
For a cross-browser solution, you need to assign a fixed height to the div that contains the list. You can't do it using only css, because the height to assign depends from the height of the browser window.
But you can use a simple javascript function to dinamically assign the height to the div.
Here is an example, using jQuery:

function resizeDiv(){
    var h = $(window).height(); //maybe the window height minus the header and footer height...
    $("#yourDivId").css("height", h + "px");
}

You should call this function when the page is loaded and when the user resizes the window:

$(document).ready(function(){

    resizeDiv();

    $(window).resize(function(){
        resizeDiv();
    });

 });

You can see this in action in this demo page I posted (resize window to test):
http://www.meiaweb.com/test/BMS_DM_NI/

回复收藏 0 原文

孤蝉 2024-07-24 04:45:08

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

回复收藏 0 原文

夜声 2024-07-24 04:45:08

我认为你应该考虑流体布局设计模式。

几个提示：

MediaQueries
使用 % 而不是 px 等固定值

回复收藏 0 原文

酒浓于脸红 2024-07-24 04:45:08

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

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

回复收藏 0 原文

~没有更多了~

关于作者

狼性发作

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

流体元素和溢出问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

流体元素和溢出问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。