Question

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

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

我尝试使用float属性创建侧边栏，但这会导致页脚不会粘到底部。

我怎样才能划分＆＃34;将内容分成两个div，并将其中一个作为左侧边栏。

这是我想要实现的目标：

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，为了让页脚贴在底部，添加height: auto;以生成min-height content工作，演示链接：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/

侧边栏和粘性页脚

1 个答案:

编辑1 -

编辑2 -