Question

我正在制作一个网页布局，我希望它在所有屏幕上都具有相同的外观。我正在处理的页面有三个部分，标题，主页和页脚，我想把它标题放在屏幕的顶部。主页和页脚粘在页面底部。

这是我想要做的：

我将标题设置在顶部，但我无法在主页和页脚部分添加百分比。
同样在标题中有一个名为'div5'的div，我希望它粘在父div的底部，即主框或中框。
我有三个盒子，想要将它们放在左，右和中间。

您能否看一下linked site并告诉我如何解决这些问题。

Answer 1

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

（元素会问“什么的百分比？”）

这里我们设置身体的高度

<强> 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>

Answer 2

通过这样做，你正在制作div 2,3＆amp; 4重叠。确保即使这样照顾。是的，您必须考虑选择Css媒体查询。请完成演示here

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

2 个答案: