需要协助建立使用Twitter的引导

我试图找出如何建立一个布局像这样使用HTML（5）和Twitter的引导这种布局：需要协助建立使用Twitter的引导

Mockup

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

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

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

来源

2013-02-14 Tommy Jakobsen

这可能工作：

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/

来源

2013-02-14 14:29:59 Pete

美丽。谢谢皮特。使用jQuery显示/隐藏滚动条并将overflow-y设置为auto有什么区别？ – 2013-02-15 08:14:21

有些浏览器如chrome会显示滚动条，即使它们在使用溢出滚动优先级时没有溢出，使用jquery方式，只会在内容延伸太远时才显示它们 – Pete 2013-02-15 08:54:16

非常感谢。我认为我更关注Jrod的解决方案，不涉及任何JavaScript，但是纯HTML/CSS。你在哪里看到利弊？ – 2013-02-18 07:15:38

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

<!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-14 14:26:36 Jrod

非常感谢Jrod。几乎在那里，但是当我向容器中添加内容时，例如一个标题，该元素的顶部边缘“推”容器，我得到一个垂直滚动条。你可以在这里看到它，我已经在jsFiddle的h1元素上强制了一个顶部边距：http://jsfiddle.net/R67wg/1/ – 2013-02-15 08:11:00

这就是所谓的折叠边距。如果你添加一些填充到你的'＃content' div，你可以解决这个问题。这里是一个小提琴http://jsfiddle.net/R67wg/8/，这里是更多关于折叠边缘http://www.w3.org/TR/CSS2/box.html#collapsing-margins – Jrod 2013-02-15 14:21:02

非常感谢你的说明。现在我有点困惑，我应该跟你的（纯HTML/CSS）还是Pete的涉及JavaScript的解决方案。你在哪里看到利弊？ – 2013-02-18 07:14:43

页脚，你有没有考虑过使用引导导航栏？您可以使用类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>

由于您使用的引导，你应该考虑为左格的Affix菜单选项。这将允许您在滚动时保持菜单在屏幕上。

来源

2013-02-14 15:41:55 JayGee

需要协助建立使用Twitter的引导

回答

相关问题