(对不起我的英语不好)
嗨,大家好,
我正在尝试重新制作学校内部网。
当我尝试制作侧边栏时,它不会转到页脚
我想这样映射该站点:
____________________________
| 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文件中)。