Jquery 需要使用Twitter引导构建此布局的帮助吗_Jquery_Html_Twitter Bootstrap

Jquery 需要使用Twitter引导构建此布局的帮助吗

jquery html twitter-bootstrap

Jquery 需要使用Twitter引导构建此布局的帮助吗,jquery,html,twitter-bootstrap,Jquery,Html,Twitter Bootstrap,我正试图弄明白如何使用HTML（5）和Twitter引导构建这样的布局： IE

我正试图弄明白如何使用HTML（5）和Twitter引导构建这样的布局：

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

我一直在试图修改这些例子/相似之处，但运气不好

你知道我能找到这样的布局的例子吗？或者你知道如何制作这样的布局吗？任何帮助都将不胜感激

以下是一个快速示例，但应满足您的要求

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


/*不要仅出于演示目的而包含*重置*/
* {
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
#边栏{
背景：绿色；
身高：100%；
位置：绝对位置；
左：-260px；
排名：0；
宽度：260px；
}
#容器{
背景：蓝色；
利润率：0.260px；
最小高度：100%；
位置：相对位置；
}
#页脚{
背景：红色；
高度：60px；
位置：固定；
底部：0；
宽度：100%；
}
边栏
容器
我是一只脚

这可能会起作用：

HTML

<div id="wrapper">
    <div id="left-column"></div>
    <div id="right-column"></div>
</div>
<div id="footer">
</div>

目前，它的overflow-y设置为scroll，但您可能希望使用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>

因为你使用Bootstrap，你应该考虑左边的菜单选项。这将允许你在滚动时保持菜单在屏幕上。

谢谢Jrod。差不多了，但是当我将内容添加到有边距的容器中时，例如页眉，该元素的顶部边距会向下“推”容器，我会得到一个垂直滚动条。您可以在这里看到，我在jsFiddle中的h1元素上强制了一个上边距：这就是所谓的折叠边距。如果您在

#内容中添加了一些填充，则可以修复此问题。这是一把小提琴，这是更多关于崩溃的利润率非常感谢你的解释。现在我有点困惑，是应该使用你的（纯HTML/CSS）还是Pete的包含JavaScript的解决方案。你从哪里看到了优点和缺点？我对这个布局还有一些小问题。以下是IE的截图：。您会在右侧看到一个滚动条，尽管它不是必需的。当窗口变得足够小时，左右两侧也会有白色边距。我认为后者与Twitter Bootstra？Beauty有关。谢谢你，皮特。使用jQuery显示/隐藏滚动条与将overflow-y设置为auto有什么区别？一些浏览器（如chrome）在使用overflow scroll属性时，即使滚动条没有溢出，也会显示滚动条，而jQuery方式仅在内容扩展太多时才会显示滚动条。我认为我更喜欢Jrod的解决方案，它不涉及任何JavaScript，而是纯HTML/CSS。您在哪里看到了优点和缺点？您的解决方案的一个问题是，滚动条不会显示在“调整窗口大小”上，而只显示在“重新加载窗口”上。除非我需要在window resize上计算和比较包装高度等？您需要将javascript放入一个函数中，然后在window load和window.resize上启动该函数
<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">footer</a></li>
        </ul>
    </div>
</div>