CSS HTML如何使侧边栏高度连接到页脚[关闭]答案

【问题标题】：CSS HTML How to make sidebar height connect to footer [closed]CSS HTML如何使侧边栏高度连接到页脚[关闭]
【发布时间】：2015-02-24 09:47:39
【问题描述】：

我想编写侧边栏高度为“100%”的页面 - 与页脚连接。有这样的图片：

我使用绝对 div 做到了，但我对这种效果不满意。我写的很烂。你能给我一些代码/建议如何编码吗？

【问题讨论】：

请发布您已经尝试过的代码。
table-cell 或 flex
这不是一个实际的问题，但你应该检查这个css-tricks.com/fluid-width-equal-height-columns

标签： html css height sidebar

【解决方案1】：

您可以像这样将 css 与 display:table-cell 一起使用

header {
}

section {
  display: table;
  width: 400px;
  min-height: 200px;
}

aside {
  display: table-cell;
  width: 120px;
  background-color: green;
}

article {
  display: table-cell;
  background-color: blue;
  width: *;
}

footer {
}

<header>
  Header
</header>
<section>
  <aside>
    sidebar
  </aside>
  <article>
    lorem ipsum...
  </article>
</section>
<footer>
  Footer
</footer>

【讨论】：

它不能正常工作。看看我上面编辑过的帖子。
如果您希望红色条一直向下显示到页脚，您最好在css中使用背景渐变来获得所需的效果。

【解决方案2】：

2015 年即将到来，伙计。试试Flexible Box Layout。现在是supported by all major browsers。如果您发现 W3C 规范难以阅读，this article 可能会给您上一课。

html, body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  background: #ddd;
}
section {
  flex: 1;
  display: flex;
}
aside {
  width: 100px;
  background: lightgreen;
}
article {
  flex: 1;
  background: lightblue;
}
footer {
  height: 40px;
  background: #ddd;
}

<header>header</header>
<section>
  <aside>sidebar</aside>
  <article>body</article>
</section>
<footer>footer</footer>

【讨论】：

你能解释一下它到底是做什么的吗？ w3 手册很难阅读。
@JuanRocamonde 代码几乎是不言自明的。如果您觉得难以理解，但又不想阅读规范，this article 可能会有所帮助。
非常感谢您的帮助
@JuanRocamonde 如果您在阅读和尝试后发现它有用且值得学习，请不要忘记回来投票：D

【解决方案3】：

我有代码（简化）：http://jsfiddle.net/L4k9gwqw/

<body>
    <div id="wrapper">
        <header>
            Header
        </header>
        <section>
            <aside>
                Here<br />is<br />Side<br />
            </aside>
            <article>
                Content here<br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br />Dynamic height
            </article>
            <div style="clear:both;"></div>
        </section>
        <footer>
            Footer
        </footer>
    </div>
</body>

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
header {
    background:#5ee;
    width: 800px;
    height: 200px;
    margin: 0 auto;
}
section {
    padding-bottom:80px;   /* Height of the footer element */
    border: 1px dashed red;
    width: 800px;
    margin: 0 auto;
}
aside {
    background: #70ee83;
    width: 250px;
    float: left;
}
article {
    width: 540px;
    float: right;
    background: orange;
}
footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

我在这里使用this code for footer always bottom。我希望侧边栏（旁边）始终与页脚连接，但内容（文章）不一定。

**编辑：** display: table 和 display: table-cell 用于部分和搁置&文章不起作用。我想得到这个效果：。我不知道如何编码这个从页脚开始到旁边结束的红色菜单。

【讨论】：