如何使部分和一边触及页脚？

Question

我通过使用以下CSS使页脚始终触摸页面底部

 footer {
      width: 100%;
      bottom: 0;
      position: fixed;        
 }

现在，我想知道如何始终使该部分和一边触摸页脚的顶部。 我将以下内容用作本节和其他地方的样式指令。

 section {
     float: left;
     background-color : red;
     width : 80%;

     }

aside{
      width : 20%;
      float : left;
      background-color : green;
    }

如果我给高度指定一个特定的像素值，它将无法在其他屏幕尺寸下正确显示。 我还应该使用什么来使高度响应并在所有大小的屏幕上始终覆盖从页眉到页脚的区域，无论页面将在何处呈现？ 任何能帮助我摆脱困境的提示将不胜感激。

Answer 1

这些基于“旁边”为20％的宽度和“页脚”为20％的高度。 您可以据此进行调整。 对于滚动的滚动条，只需删除height属性以使其动态，但我要设置min-height:80%; 以防万一：)。 您不需要这些愚蠢的包装器；）。

非滚动

position:fixed; 所有元素，并根据需要使用顶部，左侧，右侧和底部的百分比对它们进行布局。

 html, body { height:100%; width:100%; margin:0; padding:0; } footer { width: 100%; bottom: 0; position: fixed; top:80%; background-color:orange; } section { position: fixed; top:0; left:20%; right:0; bottom:20%; background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); } aside { position: fixed; top:0; left:0; right:80%; bottom:20%; background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%); } 

 <aside></aside> <section></section> <footer></footer> 

滚动

padding-bottom和padding-bottom添加与页脚高度相同值的padding-bottom 。

 html, body { height:100%; width:100%; margin:0; padding:0; } footer { width: 100%; bottom: 0; position: fixed; top:80%; background-color:orange; } section { float: left; background: linear-gradient(to bottom, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); width : 80%; height:100%; padding-bottom:20%; } aside { width : 20%; float : left; height:100%; background: linear-gradient(to bottom, rgba(241,218,54,1) 0%,rgba(254,252,234,1) 100%); padding-bottom:20%; } 

 <aside></aside> <section></section> <footer></footer> 

Answer 2

我建议您为整个页脚使用包装纸。

像这样：

 //this is the fixed block .wrapper { position: fixed; display: block; width: 100%; bottom: 0; left: 0; } .aside { position: relative; width: 80%; height: 100px; background: yellow; display: inline-block; } .section { position: relative; width: 19%; display: inline-block; height: 200px; background: blue; } .footer { position: relative; width: 100%; display: inline-block; height: 200px; background: black; } 

 <div class="wrapper"> <div class="aside"></div> <div class="section"></div> <div class="footer"></div> </div>