具有流体布局的标题高度

Posted 2023-03-06

【中文标题】具有流体布局的标题高度

【英文标题】：header height with fluid layouts

【发布时间】：2012-12-09 18:49:03

【问题描述】：

简介

我正在做一个具有流畅布局的网站（所有容器宽度都以 % 表示）以适应所有分辨率。没关系，在小分辨率、宽 imac 屏幕、平板电脑和手机的浏览器中看起来不错。

布局

它有一些列，它是一个 1200 像素页面的想法。布局是这样的：

问题

但我的标题高度有问题。目前已修复：

#title 
    padding-top: 135px;

我希望在分辨率的基础上更改标题高度，但我不知道如何解决。

如果我使用百分比作为高度，则不清楚它是如何计算的。我应该使用html, body height: 100%; ，但如果内容与另一页不同怎么办？如果内容溢出视口？

【问题讨论】：

你是否尝试过你的标题百分比。

不，我没有尝试过，因为我不清楚如何缩放维度。如果 olverflow 列的内容流向视口？

【参考方案1】：

我不知道为什么 % 值不适用于高度或其他垂直属性。

我所做的是使用媒体查询。

例如：

#title 
padding-top: 135px;

@media screen and (max-width=600px)
    #title 
    padding-top: 100px
    

各种屏幕尺寸等等。

您可以使用 webdeveloper 工具栏等工具来查看它在多种屏幕分辨率下的显示方式

【讨论】：

不，我没有尝试过高度的 %，因为我不清楚如何缩放它。如果olverflow 列的内容是视口？我必须考虑 100% 什么？

【参考方案2】：

我用一些 javascript 和 jquery 做到了：

    function resizeTitle() 
        var width = $(window).width();
        var h = width;
        $("header").css("height", h/8+"px");
        $("header #title").css("padding-top", h/14+"px");
    
    $(window).resize(resizeTitle);
    resizeTitle();