Fatal编程技术网
  • css/
  • Css 如何使用TwitterBootstrap让多个列消耗100%的高度？

Css 如何使用TwitterBootstrap让多个列消耗100%的高度？

css twitter-bootstrap

Css 如何使用TwitterBootstrap让多个列消耗100%的高度？,css,twitter-bootstrap,Css,Twitter Bootstrap,我已经看到了许多类似的问题，但没有找到我所寻找的答案。详情如下: 我正在使用twitter引导，所以我想要一个与之兼容的解决方案 布局将看起来像。对不起，我不能嵌入图像，因为我需要10分第一 是我到目前为止最接近的。问题是我不能让边栏停在页脚 我需要的主要内容，以扩大作为侧栏相同 侧边栏和主要内容是两种不同的颜色和大小。它们都必须延伸到页脚 请注意，最小高度必须为100% 如果内容增长过多，页脚应移动（即需要滚动才能看到） 我不想使用JavaScript，但如果需要的话，我不介意使用JS逐步增

我已经看到了许多类似的问题，但没有找到我所寻找的答案。详情如下:

  • 我正在使用twitter引导，所以我想要一个与之兼容的解决方案
  • 布局将看起来像。对不起，我不能嵌入图像，因为我需要10分第一
  • 是我到目前为止最接近的。问题是我不能让边栏停在页脚
  • 我需要的主要内容，以扩大作为侧栏相同
  • 侧边栏和主要内容是两种不同的颜色和大小。它们都必须延伸到页脚
  • 请注意，最小高度必须为100%
  • 如果内容增长过多，页脚应移动（即需要滚动才能看到）
  • 我不想使用JavaScript，但如果需要的话，我不介意使用JS逐步增强的解决方案（我也在使用jQuery）
  • 页面内容以固定宽度水平居中
通过css，这是可能的，但需要一些技巧

您需要通过添加填充底：1000px使两个div/column都非常非常高，然后使用margin-bottom:-1000px“欺骗浏览器”使其认为它们没有那么高。下面的例子更好地解释了这一点

希望一切顺利。

我想这可能就是你要找的东西：

主要思想是在
和
上设置
高度：100%
，然后确保容器也占据所有高度（通过
最小高度：100%
）。您可能会注意到，该代码还包含IE6的变通方法，因为它最初是编写的，当时与IE6作战只是另一天的工作

这是通过修改更复杂和更经常使用来实现的

嘿，我想你想要这个

Css

**

** HTML

    <div class="header">header bar </div>
    <div class="wraper">
        <div id="container2">
    <div id="container1">
        <div id="sidebar">
            This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text
        </div>
        <div id="content">
           This is dummy text here This is dummy text here This is dummy
        </div>
    </div>
</div>
    </div>
        <div class="footer">Footer bar</div>

标题栏
这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本这是虚拟文本
这是虚拟文本这是虚拟文本这是虚拟文本
页脚栏
现场演示

更多信息

您可以尝试使用显示：表格到父Div和显示：表格单元格到儿童Div以实现您的结果

见守则：-

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  .container {
    background:red;
    width:600px;
    display:table;
  }

  .left {
    background:yellow;
    width:200px;
    display:table-cell;

  }


    .mid {
    background:blue;
    width:400px;
    display:table-cell;


  }

      .right {
    background:green;
    width:200px;
    display:table-cell;

  }



</style>
</head>
<body>
  <div class="container">
    <div class="left">shailender</div>
      <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
        fff</div>
      <div class="right">afdafaf</div>


  </div>
</body>
</html>


JS-Bin
.集装箱{
背景：红色；
宽度：600px；
显示：表格；
}
.左{
背景：黄色；
宽度：200px；
显示：表格单元格；
}
.中{
背景：蓝色；
宽度：400px；
显示：表格单元格；
}
.对{
背景：绿色；
宽度：200px；
显示：表格单元格；
}
谢兰德
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。
fff
非洲达法夫
演示：-

唯一真正的答案是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">





左边
正确的

谢谢你的例子。我已经看到了一些使用JavaScript的例子，但我强烈希望不需要它；无论如何，这个例子是非常值得赞赏的。你知道我的需求是否可以不用JavaScript吗？谢谢，这就是我想要的。我只有15岁才能投票，但我已经指出这是正确的答案。这如何回答“使用twitter引导”的问题？为什么会有任何影响？引导的使用在哪里？（和“浮动”属性） 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<table border="1" height="100%" width="100%">
    <tr>
        <td width="10%">
            left
        </td>
        <td>
            right
        </td>
    </tr>
</table>