gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:54:22 27 4
gpt4 key购买 nike

我正在制作一个网页布局,希望它在所有屏幕上都具有相同的外观。我正在处理的页面包含三个部分,页眉、主体和页脚,我希望页眉位于屏幕顶部。 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com