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

这些是基于Aside为20％宽度而Footer为20％高度。你可以相应调整。对于滚动的一个，只需删除高度属性以允许它是动态的，但我会在它们上放一个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添加到与页脚高度相同值的旁边和部分。

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>

如何使该部分和旁边触摸页脚？

2 个答案:

非滚动

滚动