html - 标题高度与流体布局

标签 html css height responsive-design fluid-layout

简介

我正在制作一个具有流畅布局的网站(所有容器宽度均以 % 表示)以适合所有分辨率。没问题,在小分辨率、宽 imac 屏幕、平板电脑和手机的浏览器中看起来不错。

布局

它有一些列,它是一个 1200px 页面的想法。布局是这样的:

enter image description here

问题

但我对页眉高度有疑问。现在它是固定的:

#title {
    padding-top: 135px;
}

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

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

最佳答案

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

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

例如:

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

等等每个屏幕尺寸。

您可以使用诸如 webdeveloper 工具栏之类的工具来查看它在多种屏幕分辨率下的显示效果

关于html - 标题高度与流体布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14002850/

相关文章:

javascript - 将 DOM 置于叠加层之上

javascript - 在图像上重叠 "input text"

html - div 在另一个 div 中(css 定位)

css - 如何在混合容器中选择类(class)的第一个 child /最后一个 child ?

css - Flexbox 主体和主最小高度

html - 使容器在包裹时收缩以适合子元素

javascript - 从哪里开始使用 HTML5 中的 Canvas

jquery - 当我将鼠标悬停在这个 bootstrap btn-info 上时,它会失去背景颜色

html - Squarespace:使 3 个兄弟元素始终具有相同的高度并保持响应式设计

CSS:将高度设置为父级的 100%