流体布局中的高度答案

【问题标题】：height in a fluid layout流体布局中的高度
【发布时间】：2013-05-24 06:11:28
【问题描述】：

我正在尝试使用引导程序设计一个流畅/响应式的网页设计。我正在尝试设计布局，使其适合许多设备。关于将高度设置为布局元素（例如页眉或页脚）的问题。我现在以像素为单位，但我想知道是否应该使用其他形式的测量。

我可能想多了，但我想确保我以正确的方式做这件事。提前致谢！

【问题讨论】：

【解决方案1】：

尽可能避免设置height。您经常可以绕过 - 最好是这样 - 在有问题的元素上使用 padding，和/或在元素的子元素上使用 margin 值。

如果您绝对需要定义高度，请使用min-height，这样它就会随着其子项占用更多垂直空间而增长。

很多时候人们回退到定义静态height 值，因为元素也使用float 并添加高度以恢复内容流和背景。这是相当糟糕的做法，如果是这种情况，您应该考虑查看methods of clearing floats。

【讨论】：

完美答案。为了绕过，我会添加到padding、margin：line-height 和（很少使用）以及display: table: cell 和border-spacing。

【解决方案2】：

如果您有很多不同的设备，像素可能是最佳选择。要考虑的其他测量：

【讨论】：

【解决方案3】：

em 和 % 是流畅/响应式网页设计的理想解决方案。

我会建议媒体查询 css

@media only screen and (max-device-width: 480px) { }

【讨论】：