Question

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

Mockup

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

我一直在尝试修改像this，this和this这样的示例/相似之处，但没有运气。

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

Answer 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>

Answer 2

这可能有效：

<强> 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/

目前它已经设置了overflow-y滚动但你可能想要添加他的使用jquery所以它并不总是在浏览器中添加滚动条，如chrome和我不确定它是否与Twitter引导程序兼容

当内容太大时，此版本会添加溢出：

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

Answer 3

对于页脚，您是否考虑过使用bootstrap导航栏？您可以使用课程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>

由于您使用的是bootstrap，因此您应该考虑左侧div的Affix菜单选项。这样您就可以在滚动时将菜单保留在屏幕上。

需要帮助使用Twitter Bootstrap构建此布局

3 个答案: