边栏不指向页脚

Question

（对不起我的英语）

大家好，

我正试图重新建立我的学校内部网。当我试图制作侧边栏时，它不会进入页脚

我想这样绘制网站地图：

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

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

这是我的代码：

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

谢谢！！

Answer 1

最简单的方法是使用显示表和显示表单元格（在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元素提供html5 shiv。

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

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

Answer 2

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

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