侧边栏不去页脚答案

【问题标题】：Sidebar not going to the footer侧边栏不去页脚
【发布时间】：2014-10-06 08:43:46
【问题描述】：

（对不起我的英语）

大家好，

我正在尝试改造我的学校内部网。当我尝试制作侧边栏时，它不会进入页脚

我想像这样映射网站：

  ____________________________
  |          top_bar         |
  ____________________________
  |  S  |                    |
  |  I  |                    |
  |  D  |                    |
  |  E  |                    |
  |  B  |  content_wrapper   |
  |  A  |                    |
  |  R  |                    |
  |     |                    |
  |     |                    |
  |     |                    |
  |     |                    |
  ____________________________
  |           footer         |
  ____________________________

在内容包装器中，您拥有将使用 PHP 动态生成的小部件，但稍后会生成。当我放置很多小部件时，侧边栏在最后一个菜单块之后停止。当您有很多小部件时，我希望侧边栏在顶部栏和页脚之间动态调整大小。

这是我的代码：

https://www.dropbox.com/s/r6opwlekb6ip1qi/school_intra.zip?dl=0

谢谢！！

【问题讨论】：

请不要附加保管箱文件，而是创建一个小提琴
Faux columns.
您可以使用 jquery 获取content height 并将其交给sidebar

标签： html css sidebar intranet

【解决方案1】：

最简单的方法是使用 display table 和 display table-cell（IE8 及更高版本和所有其他浏览器都支持）。

在侧边栏和主要内容周围包裹一个 div：

<div class="main">
        <div class="sidebar">
                <!-- etc... -->
        </div>
        <div class="content-wrapper">
                <!-- etc... -->
        </div>
</div>

然后在原规则之后添加这个CSS（或用这些新规则修改原规则）：

.main {
    width:100%;
    display:table;
}
.content-wrapper,.sidebar {
    float:none;
    display:table-cell;
    vertical-align:top;
}

通过验证器运行您的 html，因为当您的意思是“head”时，文档的头部有一个 header 元素，而您的页脚位于 body 元素之外，这也是不允许的。如果您支持 IE8，则需要 html5 shiv 来获取您正在使用的新 html5 元素。

您的 css 也有点奇怪，因为您的样式仅适用于大于 1024 像素的显示，然后是小于 768 像素的样式，但在这些范围之间没有任何样式？

通常，您会为所有设备创建一个基本 css，然后在必要时使用媒体查询对其进行修改（最好在同一个 css 文件中，而不是在多个 css 文件中）。

【讨论】：

【解决方案2】：

根据您的要求，您必须使用 CSS 位置。

http://jsfiddle.net/amith009/eqxdzfz4/2/

【讨论】：