html - 侧边栏和粘性页脚

Question

看来我今天对 CSS 有点生疏了。在 stackoverflow 上搜索，但大多数类似的问题没有任何好的答案。

在提供的代码中，我想在 #content div 中添加一个 sidebar。我还希望即使内容中没有文本，页脚也能粘在底部。请注意，我不想要一个position:fixed; 页脚。如果页面上没有文本，则只是保留在底部的页脚。

我尝试使用 float 属性制作侧边栏，但这会导致页脚无法粘在底部。

如何将内容“划分”为两个 div，并使其中一个成为左侧的侧边栏。

Jsfiddle demo

这就是我要实现的目标:

Answer 1

我会按如下方式包装 HTML 结构:

<header>
  <h1>Header</h1>
</header>

<main>
  <nav>
    <p>Sidebar</p>
  </nav>

  <content>
    <p>Content</p>
  </content>

  <footer>
    <p>Footer</p>
  </footer>
</main>

还有 CSS:

html,
body {
    margin:0;
    padding:0;
    height:100vh;
}

header {
    background: LightSlateGray;
  max-height: 10vh;
    padding:10px;
}
  header h1 {
    margin:0;
    padding:10px 0 0 10px;
  }

main { height: 90vh; max-height: 90vh; }

nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }

nav { width: 20%; height: 100%; background-color: #ff9090; }

content { height: calc(100% - 200px); max-height: calc(100% - 200px); overflow: auto; }

footer {
    height:200px;           /* Height of the footer */
    background:#6cf;
}
  footer p {
    margin:0;
    padding:10px;
  }

演示链接 https://jsfiddle.net/fzj5gLe6/2/

内容文本未填满页面的演示链接:https://jsfiddle.net/fzj5gLe6/3/

编辑 1 -

修改CSS，将部分max-height改为min-height，为了让footer贴在底部，添加了height: auto; 使 content 的 min-height 起作用，演示链接:https://jsfiddle.net/fzj5gLe6/5/

html,
body {
    margin:0;
    padding:0;
    height:100vh;
}

header {
    background: LightSlateGray;
  min-height: 10vh;
    padding:10px;
}
  header h1 {
    margin:0;
    padding:10px 0 0 10px;
  }

main { height: 0; min-height: 90vh; }

nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }

nav { min-height: 100%; width: 20%; }

content { height: auto; min-height: calc(100% - 200px); }

footer {
    height:200px;           /* Height of the footer */
    background:#6cf;
  float: right;
}
  footer p {
    margin:0;
    padding:10px;
  }

编辑2-

为了让 nav 元素填充高度，我将 position: relative; 附加到 main 元素，还添加了 clearfix修复它，让 main 获得元素内部的正确高度。 (还有 height: auto;)

main { position: relative; height: auto; }
  main:before, main:after { display: table; content: ''; }
  main:after { clear: both; }

之后，我修改了 nav 元素的样式，使其填充父元素的高度

nav {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 20%;
  background:lightgreen;
  float: left;
}

最后，我将 content 和 footer 元素设置为 float: right; 以完成布局。

content, footer { float: right; }

完成的演示:https://jsfiddle.net/89ucrec5/3/