CSS 相对大小的页眉/页脚
我不是 CSS 专家，所以我可能会遗漏一些明显的东西。我正在尝试设置相对大小的页眉和页脚（以便在较大的显示器上，页眉和页脚比较小的屏幕上更大）。为此，我使用百分比高度。但是，只有当我将 position 设置为 absolute 时，这才有效。问题是，将其设置为绝对意味着它与屏幕的主要部分重叠（页眉和页脚之间）。将其设置为相对不起作用，因为它依赖于页眉/页脚内的项目。 这就是我的页眉的样子：
.header
{
position:absolute;
top:0px;
background-color:white;
width:100%;
height:30%;
}
ASPX 页面仅包含
<div class="header"></div>
有没有办法获得相对比例的页眉和页脚？
谢谢
I'm not a CSS expert so I might be missing something obvious. I'm trying to set a relative size header and footer (so that on larger monitors, the header and footer are larger than on smaller screens). To do this, I'm using a percentage height. However, this only works if I set the position to absolute. The problem is, setting it to absolute means that it overlaps the main part of the screen (inbetween the header and footer). Setting it to relative doesn't work since it relies on items being inside the header/footer.
This is what my header looks like:
.header
{
position:absolute;
top:0px;
background-color:white;
width:100%;
height:30%;
}
the ASPX page simply contains
<div class="header"></div>
Is there a way to get relatively proportioned header and footers?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
为了让元素采用百分比高度，您需要定义 HTML 和 BODY 来定义高度。由于您不知道这是什么，因此使用 100%。
In order to have elements take a percentage height, you need to define the HTML and BODY to have a defined height as well. Since you don't know what this is, use 100%.
要使用百分比高度，父级需要具有固定高度，因为如果父级是自动高度，那么它将取决于子级内容的高度......这取决于父级高度等。我认为当您设置位置时为了绝对，它将屏幕视口作为父元素，它具有固定的大小（我的理论），这就是它与绝对一起工作的原因。
我认为尝试根据浏览器分辨率执行比例页眉和页脚并不是一个好主意。这对我来说真的没有多大意义，老实说，你需要尝试放大和缩小标题中的字体大小或图像以匹配等。如果你真的想要，我建议使用不同的 CSS用户可以选择的样式表（或由 javascript 自动选择）。这样，如果有人有很大的分辨率，他们可以根据需要选择较大的分辨率（或者自动为他们选择）。这样您就不必处理任何扩展问题。
To use percentage heights the parent needs to have a fixed height, because if the parent is height auto then it will depend on the height of the child content....which depends on the parent height etc. I think when you set the position to be absolute it takes the screen viewport as the parent element which does have a fixed size (theory by me), which is why it works with absolute.
I don't think its a good idea to try and do the proportional header and footer based on the browser resolution. It really doesn't make much sense to me, honestly, you're going to need to try and scale up and down the font sizes or images you have in the header to match etc. If you really want I would suggest having different CSS stylesheets which users can choose (or is selected automatically by javascript). This way if someone has a huge resolution they can choose the larger one if they want (or its automatically chosen for them). That way you don't have to deal with any scaling issues.