Question

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

我希望我的包装器分隔器具有流体高度。

因此它应该在30px处从顶部和底部有一个精确的边距，然后包装器本身可以扩展与浏览器高度相关，但它始终是距浏览器顶部和底部的特定距离。

是否也可以制作一个最小高度，这样它就不会被压得太大，变成一个可滚动的页面？

Answer 1

您的分隔符应具有以下属性。这将给它一个30px的顶部和底部边距，它将根据您的窗口高度进行调整。

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

检查http://jsfiddle.net/zkebs/

处的工作示例

Answer 2

一种简单的方法是在<body>上添加一些填充以模拟<div>上的边距，然后使<div> 100％高度：

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

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

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

你如何制作一个流体包裹分隔器高度？

2 个答案:

检查http://jsfiddle.net/zkebs/