标题高度与流体布局

Question

简介

我正在建立一个流畅布局的网站（所有容器宽度都以％表示），以适应所有分辨率。没关系，它在浏览器中看起来不错，具有小分辨率，宽屏幕，平板电脑和移动设备。

布局

它有一些颜色，它是1200px页面的想法。布局就像这样：

问题

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

#title {
    padding-top: 135px;
}

我想在分辨率的基础上更改标题高度，但我不知道如何修复它。

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

Answer 1

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

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

例如：

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

等等每个屏幕尺寸。

您可以使用某些工具（如webdeveloper工具栏）查看它在多种屏幕分辨率下的显示方式

Answer 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();