当前位置：文江博客话题详情

如何确定流体包装分隔板的高度？

发布于 2024-10-31 12:07:06 字数 180 浏览 1 评论 0原文

我的朋友这样做了，但他不会告诉我他是怎么做到的，但

我希望我的包装分隔板具有流动的高度。

因此，它应该与顶部和底部有30px的精确边距，然后包装器本身可以根据浏览器高度进行扩展，但它始终与浏览器的顶部和底部有特定的距离。

是否也可以设置一个最小高度，这样它就不会被挤压太多，并成为一个可滚动的页面？

原文

分享到QQ

分享到微博

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

发布评论

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

情魔剑神 2024-11-07 12:07:06

您的分隔线应具有以下属性。这将为它提供 30 像素的顶部和底部边距，并且它将根据窗口高度进行调整。

.divider{
 position:absolute;
 top:30px;
 bottom:30px;
}

检查工作示例 http://jsfiddle.net/zkebs/

Your divider should have the following properties. This will give it a 30px top and bottom margin and it will adjust with your window height.

.divider{
 position:absolute;
 top:30px;
 bottom:30px;
}

Check working example at http://jsfiddle.net/zkebs/

回复收藏 0 原文

爱你不解释 2024-11-07 12:07:06

一种简单的方法是在上放置一些填充，以模拟

上的边距，然后制作

code> 100% height：

<html>
    <body style="padding: 50px;">
        <div style="background: #eee; height: 100%;">
            Where is pancake house?
        </div>
    </body>
</html>

块元素默认为全宽，因此您不必担心该部分。
背景颜色仅用于说明目的。

您可以使用 min-height: 100px; Overflow-y: auto; 如果你想限制高度并在必要时获得滚动条。

One simple way is to put some padding on <body> to simulate a margin on your <div> and then make your <div> 100% height:

<html>
    <body style="padding: 50px;">
        <div style="background: #eee; height: 100%;">
            Where is pancake house?
        </div>
    </body>
</html>

Block elements are full width by default so you don't have to worry about that part.
The background color is just for illustrative purposes.

You can use min-height: 100px; overflow-y: auto; if you want to limit the height and get a scrollbar when necessary.

回复收藏 0 原文

~没有更多了~