Question

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

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

    height:30%;

}

ASPX页面只包含

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

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

由于

Answer 1

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

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

Answer 2

为了让元素占据百分比高度，您需要定义HTML和BODY以具有定义的高度。由于您不知道这是什么，请使用100％。

html, body {
    height:100%;
}

CSS相对大小的页眉/页脚

2 个答案: