侧边栏和粘性页脚

时间:2016-08-31 01:00:40

标签: html css

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

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

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

我怎样才能划分"将内容分成两个div,并将其中一个作为左侧边栏。

Jsfiddle demo

这是我想要实现的目标: enter image description here

1 个答案:

答案 0 :(得分: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;
}

最后,我将contentfooter元素设为float: right;以完成布局。

content, footer { float: right; }

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