1

我试图弄清楚如何使用 HTML(5) 和 Twitter Bootstrap 构建这样的布局：

小样

它不需要在 IE < 9（虽然 8 会很好）或旧版本的 Firefox/Chrome 中得到支持。然而，它应该在移动设备上很好地呈现，尽管我们知道固定的左侧菜单在非常小的显示器上是一个问题。它的主要用途是台式机和平板电脑。

我一直在尝试修改诸如this、this和this之类的示例/相似性，但没有运气。

你知道我可以找到这样的布局的任何例子，或者你知道如何制作吗？任何帮助将非常感激！

4

3 回答 3

1

以下是一个简单的示例，但应该满足您的要求。

<!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>
于 2013-02-14T14:26:36.160 回答
1

这可能有效：

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;}

http://jsfiddle.net/rGBAt/1/

目前它的溢出-y 设置为滚动，但您可能希望使用 jquery 添加他，因此它并不总是在 chrome 等浏览器中添加滚动条，我不确定它是否与 Twitter 引导程序兼容

此版本在内容变得太大时添加溢出：

http://jsfiddle.net/rGBAt/7/

于 2013-02-14T14:29:59.013 回答
0

对于页脚，您是否考虑过使用引导导航栏？您可以使用该类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菜单选项。这将允许您在滚动时将菜单保留在屏幕上。

于 2013-02-14T15:41:55.253 回答