需要帮助使用 Twitter Bootstrap 构建此布局 [关闭]答案

【问题标题】：Need help building this layout using Twitter Bootstrap [closed]需要帮助使用 Twitter Bootstrap 构建此布局 [关闭]
【发布时间】：2013-01-30 08:51:09
【问题描述】：

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

它不需要在 IE

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

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

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案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/

【讨论】：

美丽。谢谢皮特。使用jQuery显示/隐藏滚动条和设置overflow-y为auto有什么区别？
某些浏览器（如 chrome）会在您使用溢出滚动预属性时显示滚动条，即使它们没有溢出，使用 jquery 方式它只会在内容扩展太远时显示它们
非常感谢。我认为我更喜欢 Jrod 的解决方案，它不涉及任何 JavaScript，而是纯 HTML/CSS。您认为利弊在哪里？
您的解决方案的一个问题是滚动条不会出现在窗口调整大小时，而只会出现在窗口重新加载时。除非我需要在调整窗口大小时计算和比较包装高度等？
您需要将 javascript 放入一个函数中，然后在窗口加载和 window.resize 上触发该函数

【解决方案2】：

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

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

【讨论】：

非常感谢 Jrod。快到了，但是当我将内容添加到有边距的容器时，例如一个标题，该元素的上边距将容器向下“推”，我得到一个垂直滚动条。你可以在这里看到它，我在 jsFiddle 中的 h1 元素上强制设置了上边距：jsfiddle.net/R67wg/1
这就是所谓的折叠边距。如果您在 #content div 中添加一些填充，则可以解决此问题。这是一个小提琴jsfiddle.net/R67wg/8，这里有更多关于折叠边距w3.org/TR/CSS2/box.html#collapsing-margins
非常感谢您的解释。现在我有点困惑是否应该使用您的（纯 HTML/CSS）或 Pete 的涉及 JavaScript 的解决方案。您认为利弊在哪里？
我仍然对这个布局有一些小问题。这是来自 IE 的截图：i.imgur.com/p17TF9u.png。您会在右侧看到一个滚动条，尽管它不是必需的。当窗口变得足够小时，左右两边也会有白边。我认为后者与 Twitter Bootstra 有关？

【解决方案3】：

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

【讨论】：