Question

我想编写侧边栏高度为＆＃34; 100％＆＃34; - 与页脚连接。有这样的图像： enter image description here

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

Answer 1

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>

Answer 2

你可以像这样使用display:table-cell的css

＆＃13;

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 {
}

＆＃13;

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

＆＃13;

Answer 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用于部分和旁边＆amp; article doesnt＆＃39;作品。我想得到这个效果：。我不知道如何从页脚开始编码这个红色菜单，并在旁边结束。

CSS HTML如何使侧边栏高度连接到页脚

3 个答案: