保持页脚在底部，两侧有 2 个 div 和主要内容

Question

很抱歉没能写出很多代码，否则我的作业可能会被检测为抄袭。按照本教程，我能够在没有侧边栏的情况下创建一个粘性页脚。尝试对 2 divs -> "left-sidebar" 和 "right-sidebar" 做同样的事情，我得到了这个：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
header {
  padding: 10px;
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 40px;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #333;
}
#main-content {
  position: absolute;
  width: 60%;
  margin-left: 15%;
  padding-bottom: 40px;
  /* Height of the footer */
}
#left-sidebar {
  width: 15%;
  position: absolute;
  left: 0;
  word-wrap: break-word;
  padding-bottom: 40px;
}
#right-sidebar {
  right: 0;
  position: absolute;
  width: 15%;
  word-wrap: break-word;
  padding-bottom: 40px;
}

<body>
  <div id="wrapper">
    
    <header>
    </header>
    
    <div id="left-sidebar">
    </div>
    
    <div id="main-content">
    </div>
    
    <div id="right-sidebar">
    </div>
    
    <footer>
    </footer>
    
  </div>
</body>

我的技术基于将包装器的位置声明为相对位置，并将内部元素的位置声明为绝对位置。我知道在声明页脚相对位置时还有另一种技术，然后将其写在包装器之外。如果有人能提供这两种解决方案，我将非常高兴！谢谢！

@我正在探索可能性，所以我试图在没有 "push" div

的情况下解决这个问题

@我其实想实现的是这个模型

而且我不想为页脚使用固定位置，因为它会粘在我的 window 而不是 "page"

的底部

我只是不明白这些愚蠢的仇恨者无缘无故地投票，至少你可以发表评论并给予批评！

Answer 1

你可以这样实现：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 40px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: #333;
}
header {
    padding: 10px;
    background: #333;
}
#wrapper {
    min-height: 100%;
    position: relative;
    font-size: 0px;
}
#main-content {
    width: 60%;
    margin-right: 10%;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
#left-sidebar {
    width: 15%;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
#right-sidebar {
    width: 15%;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}

<header></header>
<div id="wrapper">
    <div id="left-sidebar"></div>
    <div id="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div id="right-sidebar"></div>
</div>
<footer></footer>

Answer 2

http://plnkr.co/edit/roZhOyMUxkFmpsYr9tKW?p=preview

html,
body {
  box-sizing: border-box;
  font: 400 16px/1.5'Palatino Linotype';
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background-color: #222;
  color: #EFE;
  font-variant: small-caps;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shell {
  position: relative;
  padding: 1.5em .75em;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
.content {
  position: absolute;
  left: 17vw;
  top: 10vh;
  outline: 3px dashed yellow;
  width: 66vw;
  height: 100vh;
  overflow-y: auto;
  padding: 15px;
}
header,
footer {
  width: 100%;
  height: 10vh;
  position: fixed;
  left: 0;
  outline: 2px solid cyan;
  padding: 12px;
  z-index: 100;
  background-color: hsla(160, 0%, 181%, .4);
}
footer {
  margin-top: 1.5em;
  bottom: 0;
}
header {
  margin-bottom: 1.5em;
  top: 0;
}
article {
  outline: 3px dashed white;
  height: 100%;
}
section {
  width: 100%;
  outline: 1px solid lime;
  height: 20vh;
}
.left,
.right {
  outline: 2px solid red;
  position: absolute;
  top: 10vh;
  width: 23vh;
  height: 80vh;
  padding: 5px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}

<!doctype html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <div class="shell">
    <header>
      <h1>H1 - Header</h1>
    </header>

    <nav class="left">
      <h4>H4 - Nav</h4>
    </nav>

    <main class="content">
      <h1>H1 - Main</h1>
      <article class="blog">
        <h2>H2 - Article</h2>
        <section id="intro">
          <h3>H3 - Section - Introduction</h3>
        </section>
        <section id="part1">
          <h3>H3 - Section - Part 1</h3>
        </section>
        <section id="part2">
          <h3>H3 - Section - Part 2</h3>
        </section>
        <section id="part3">
          <h3>H3 - Section - Part 3</h3>
        </section>
      </article>

    </main>

    <aside class="right">
      <h4>H4 - Aside</h4>
    </aside>

    <footer>
      <h3>H3 - Footer</h3>
    </footer>

  </div>
</body>

</html>

Answer 3

有一个简单的解决方案。您希望 header 位于页面顶部，页脚位于底部，sidebars/content 将滚动

将此添加到您的 CSS header:

position: fixed;
width: 100%;
z-index: 999;

只需将 CSS 页脚从 'absolute' 定位更改为 'fixed'，如下所示：

position: fixed;

保持页脚在底部，两侧有 2 个 div 和主要内容

Keeping footer on to the bottom with 2 divs on sides and main content

html

css

sticky-footer