(对不起我的英语不好)

嗨,大家好,

我正在尝试重新制作学校内部网。
当我尝试制作侧边栏时,它不会转到页脚

我想这样映射该站点:

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


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

这是我的代码:

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

谢谢 !!

最佳答案

最简单的方法是使用显示表和显示表单元(在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;
}


当您的意思是“ head”时,在文档的头部有header元素,而页脚在body元素之外,这也是通过HTML验证程序运行HTML的原因。如果您支持IE8,则需要将html5 shiv用于所使用的新html5元素。

您的css也有点奇怪,因为您仅具有大于1024px的显示样式,然后具有小于768px的样式,但是这些范围之间没有任何样式?

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

10-07 19:33
查看更多