Question

我一直在尝试做一些非常简单的事情，但我无法让它发挥作用！

以下是我正在尝试的内容：

---保证金最高：15 px

--- VARIABLE HEIGHT DIV（想象一个类似盒子的元素）

---保证金底部：15px

我基本上希望根据浏览器窗口高度调整框大小。

以下是我一直在尝试的内容：

CSS

 body {
    background-color: #D0CDC5;
    height:100%
}

 #info_box {
    background-color: rgba(40,40,40,0.5);
    border: rgba(34,34,34,0.9) 1px solid;
    width: 350px;
    height: 100%;
    margin: 15px 0px 15px 20px;
}

 #info_box p {
    color: red;
}

HTML

<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>

顺便说一句，为什么文本从div的顶部出现15px？为什么不冲洗？

非常感谢，

**编辑

查看此链接，非常好的答案适用于IE6和7的所有浏览器。another HTML/CSS layout challenge 感谢@Hristo！

Answer 1

更新

查看小提琴......

Edit，Full Screen

查看小提琴...... http://jsfiddle.net/UnsungHero97/uUEwg/1/

我希望这会有所帮助赫里斯托斯

Answer 2

如果您不需要支持IE6，并且这不是更大布局的一部分，那么有一种简单的方法：

#info_box {

position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;

}

或者，您可以使#info_box拉伸整个高度，并使用与上述相同的数据将position: absolute div放入其中。

我不确定是否有办法在没有绝对或固定定位的情况下执行此操作，因为无论您使用填充还是边距，您总是会在已经100％高度的位置添加30个像素。我很高兴被证明是错的。

Answer 3

元素根据其中的内容获得高度。所以你已经有了一个居中的元素，它将从你站点的正文顶部和底部有15px的上下边距。

但是如果你想要一个总是位于屏幕中间的元素，填充除15px顶部和15px底部以外的所有元素，那么用“常规”方法无法实现。如果内容大于屏幕大小，它必须是一个图像或一个可重复大小的框，它将有一个滚动条。

无论如何，如果这是你想要的，给它一个固定的大小和高度，并使用position：fixed。

Answer 4

如果您始终使用一致的浏览器分辨率，那么它是可行的。但是，如果您的屏幕尺寸发生变化，具体取决于您使用的设备（平板电脑，手机等），那么仅通过CSS就无法实现这一目标。

我是使用jQuery动态完成的。

CSS：div扩展到窗口高度，边缘底部固定

4 个答案:

更新