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”并且你的页脚在body元素之外时也是不允许的，你在文档的头部有一个header元素。如果你支持IE8，你需要为你正在使用的新html5元素使用html5 shiv。

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

通常，您将拥有所有设备的基本css，然后在必要时使用媒体查询进行修改（最好是在相同的css文件而不是多个css文件中）。

Answer 2

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

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

边栏不会进入页脚

2 个答案: