CSS 垂直尺寸答案

【问题标题】：CSS vertical sizingCSS 垂直尺寸
【发布时间】：2011-10-08 08:21:48
【问题描述】：

我未能正确调整网页大小和对齐的内容区域。该区域应使用除顶部 80px 和底部 20px 之外的所有垂直可见屏幕空间。在某些情况下，页面可能会继续向下（但您必须滚动才能看到它）。

示例： a) 如果屏幕区域为 800x600 - 内容区域应为 500px 高 b) 如果屏幕区域为 700x1100 - 内容区域应为 1000px 高

网站是用 HTML 和 CSS 构建的。

【问题讨论】：

CSS3 与这个问题无关，说实话 HTML5 也不是。您将需要查看 Javascript
@benhowdle89 不完全正确，CSS3 是相关的。可以使用 CSS 媒体查询。当然 MSIE 8 及以下不支持它们，但是，嘿，这并不奇怪。 css-tricks.com/6731-css-media-queries

【解决方案1】：

您必须研究流动布局的概念。见：Whats a liquid layout?。

我认为在您的情况下，为不同的屏幕分辨率使用不同的 CSS 是最好的选择

【讨论】：

【解决方案2】：

您可以使用媒体查询根据屏幕大小设置不同的规则。例如，像这样：

@media only screen and (max-width: 1099px) {
  /* rules that only apply for canvases narrower than 1100px */
}

【讨论】：