我试图弄清楚如何使用 HTML(5) 和 Twitter Bootstrap 构建这样的布局:
它不需要在 IE < 9(虽然 8 会很好)或旧版本的 Firefox/Chrome 中得到支持。然而,它应该在移动设备上很好地呈现,尽管我们知道固定的左侧菜单在非常小的显示器上是一个问题。它的主要用途是台式机和平板电脑。
我一直在尝试修改诸如this、this和this之类的示例/相似性,但没有运气。
你知道我可以找到这样的布局的任何例子,或者你知道如何制作吗?任何帮助将非常感激!
以下是一个简单的示例,但应该满足您的要求。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Don't include the * reset just for demonstration purposes only */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#sidebar {
background: green;
height: 100%;
position: absolute;
left: -260px;
top: 0;
width: 260px;
}
#container {
background: blue;
margin: 0 0 0 260px;
min-height: 100%;
position: relative;
}
#footer {
background: red;
height: 60px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
sidebar
</div>
container
</div>
<div id="footer">
I am a footer
</div>
</body>
</html>
这可能有效:
HTML
<div id="wrapper">
<div id="left-column"></div>
<div id="right-column"></div>
</div>
<div id="footer">
</div>
CSS
body, html {height:100%; padding:0; margin:0;}
#wrapper {height:100%; padding:0 0 60px 260px; box-sizing:border-box; -moz-box-sizing:border-box;}
#left-column {width:260px; margin-left:-260px; float:left; height:100%; background-color:red; overflow-y:scroll;}
#right-column {width:100%; float:left; height:100%; background-color:blue; overflow-y:scroll;}
#footer {height:60px; position:fixed; bottom:0; left:0; width:100%; background-color:green;}
目前它的溢出-y 设置为滚动,但您可能希望使用 jquery 添加他,因此它并不总是在 chrome 等浏览器中添加滚动条,我不确定它是否与 Twitter 引导程序兼容
此版本在内容变得太大时添加溢出:
对于页脚,您是否考虑过使用引导导航栏?您可以使用该类navbar-fixed-bottom
将其固定到底部。它将始终可见。
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">footer</a></li>
</ul>
</div>
</div>
由于您使用的是引导程序,因此您应该考虑左侧 div 的Affix菜单选项。这将允许您在滚动时将菜单保留在屏幕上。