CSS 相对大小的页眉/页脚答案

【问题标题】：CSS Relative sized header/footerCSS 相对大小的页眉/页脚
【发布时间】：2011-02-16 01:58:48
【问题描述】：

我不是 CSS 专家，所以我可能会遗漏一些明显的东西。我正在尝试设置相对大小的页眉和页脚（以便在较大的显示器上，页眉和页脚比在较小的屏幕上大）。为此，我使用百分比高度。但是，这仅在我将position 设置为absolute 时才有效。问题是，将其设置为绝对意味着它与屏幕的主要部分重叠（在页眉和页脚之间）。将其设置为相对不起作用，因为它依赖于页眉/页脚内的项目。这是我的标题的样子：

.header
{
    position:absolute;
    top:0px;
    background-color:white;
    width:100%;

    height:30%;

}

ASPX 页面只包含

<div class="header"></div>

有没有办法获得相对比例的页眉和页脚？

谢谢

【问题讨论】：

标签： asp.net css header footer css-position

【解决方案1】：

为了让元素采用百分比高度，您需要定义 HTML 和 BODY 以具有定义的高度。因为你不知道这是什么，所以使用 100%。

html, body {
    height:100%;
}

【讨论】：

【解决方案2】：

要使用百分比高度，父级需要有一个固定高度，因为如果父级是自动高度，那么它将取决于子级内容的高度......这取决于父级高度等。我想当你将位置设置为绝对位置，它将屏幕视口作为具有固定大小的父元素（我的理论），这就是它与绝对值一起使用的原因。

我认为尝试根据浏览器分辨率进行比例页眉和页脚并不是一个好主意。老实说，这对我来说真的没有多大意义，你将需要尝试放大和缩小标题中的字体大小或图像以匹配等。如果你真的想要我建议使用不同的 CSS用户可以选择的样式表（或由 javascript 自动选择）。这样，如果有人有很大的分辨率，他们可以根据需要选择更大的分辨率（或自动为他们选择）。这样您就不必处理任何缩放问题。

【讨论】：

我也不会在整个网站上采用这个想法。这只是一个特殊的页面。网站的其余部分有一个固定的布局。