html - 侧边栏不会转到页脚

Question

(对不起我的英语)

大家好，

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

我想像这样映射站点:

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

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

这是我的代码:

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 也有点奇怪，因为您的样式仅适用于大于 1024 像素的显示，然后适用于小于 768 像素的样式，但在这些范围之间没有任何样式？

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