html - 适合所有屏幕的百分比定位

标签 html css css-float

我正在制作一个网页布局,希望它在所有屏幕上都具有相同的外观。我正在处理的页面包含三个部分,页眉、主体和页脚,我希望页眉位于屏幕顶部。 main 和 footer 粘在页面底部。

这是我想做的:

  1. 我将页眉置于顶部,但我无法将百分比添加到主要部分和页 footer 分。
  2. 在页眉中还有一个名为“div5”的 div,我希望它粘在作为主框或中间框的父 div 的底部。

  3. 在页脚中我有三个框,它们分别位于左侧、右侧和中间。

你能看看linked site吗?并让我知道如何解决这些问题。

最佳答案

百分比高度仅在您将父元素设置为具有高度时才有效。

(元素会询问“什么的百分比?”)

这里我们给body设置了一个高度

CSS

<style type="text/css">

      html,body { height:100%;}

      #header { display:block; height:10%; }
      #main   { display:block; height:80%; }
      #footer { display:block; height:10%; }

</style>

标记

   <body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
   </body>

关于html - 适合所有屏幕的百分比定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10769246/

相关文章:

javascript - Lavalamp 下拉重叠

javascript - 在克隆期间更改 div 的文本

javascript - 单击时更改输入占位符不透明度?

css - 如何使用 bootstrap3 创建具有两种颜色的导航栏

css - 如何实现4栏内容,所有内容都聚在一起?

javascript - 如何在 div 中使用 overflow-y visible 和 overflow-x 滚动?

jquery - css 事件类 jquery

从另一台服务器导入css

html - 将 2 个 div 设置为彼此相邻

html - CSS 的布局问题