使用绝对定位的主要元素时，将页脚放在底部

Question

场景

我正在使用包含三个主要元素的页面布局。

x1 中心柱

position:relative;
padding-right:300px;

x2 侧边栏件右侧

1-侧边栏顶部

position:absolute;
top:0;
right:0;
height:250px;
width:300px;

2-sidebarbottom

position:absolute;
top:250px;
right:0;
width:300px;

HTML 结构

<div class="sidebartop"></div>
<div class="main"></div>
<div class="sidebarbottom"></div>

我为什么要这样做？

因为我希望边栏是固定宽度的，让中间的列占据剩余的水平可用空间 space。

但是...为什么我要将同一个侧边栏分成两部分，而不是浮动或内联块对齐两列？

因为我希望侧边栏的上侧在移动设备上停留在主要内容之前，为此我只是对所有元素进行 position:relative;，以便它们流入所需的移动结构。

所以问题是什么？

边栏结构使得将页脚保持在底部变得相当复杂。现在我正在使用 javascript 方法动态重新定位页脚。我正在考虑用纯 css.

实现此目的的巧妙方法

你可以看到一个 JSFiddle here。

非常感谢您抽出宝贵时间。

Answer 1

我认为你需要 this.can 你请检查下面的代码...

回答。enter code here

html,
body {
 margin:0;
 padding:0;
 height:100%;
}
#wrapper {
 min-height:100%;
 position:relative;
}
#header {
 background:#ededed;
 padding:10px;
}
#content {
 padding-bottom:100px; /* Height of the footer element */
}
#footer {
 background:#ffab62;
 width:100%;
 height:100px;
 position:absolute;
 bottom:0;
 left:0;
}

 <div id="wrapper">
  
  <div id="header">
  </div><!-- #header -->
  
  <div id="content">
  </div><!-- #content -->
  
  <div id="footer">
  </div><!-- #footer -->
  
 </div><!-- #wrapper -->

Answer 2

你可以（而且几乎肯定应该）在没有绝对定位的情况下这样做。

这是一种 float-based 方法，它可以保留您的文档顺序并且不依赖于任何元素的定位或固定高度：

body, html {
  margin: 0; padding: 0;
}
* {
  box-sizing: border-box;
}
.topside,
.bottomside {
  width: 250px;
  float: right;
  clear: right;
  background-color: #FFC;
}
.main {
  width: calc(100vw - 250px); /* <-- This is the interesting bit */
  float: left;
  background-color: #FCF
}
.footer {
  clear: both;
  background-color: #CFF
}

<div class="topside">
  Sidebar Piece 1 [Stays before main on narrow screens]
</div>
<div class="main">
  MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS
  MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS

</div>
<div class="bottomside">
  Sidebar Piece 2
</div>
<div class="footer">
  Keep footer at bottom
</div>
</div>

（您可以类似地使用 calc 和 vh 使您的边栏高度与主要内容区域的高度匹配，但我相信这至少需要在页脚和一个侧边栏的一半，以及 header（如果有的话）。）

我还没有详细研究的另一种可能性：您可以通过更改文档顺序将侧边栏的两半放在一起来实现相同的效果（这将使您的桌面布局更易于管理）并在您的移动布局中使用 flex-direction 来更改主栏和侧边栏顶部块的外观顺序。

使用绝对定位的主要元素时，将页脚放在底部

Keep footer at the bottom when using absolute positioned main elements

html

css

footer