css - 使用 Bootstrap,如何创建多个全屏 div 以相互堆叠

标签 css twitter-bootstrap html

我想创建一个包含多个 100% div 的页面,这些 div 相互堆叠。类似于 Bootstrap Cover Template Example ,但在第一个屏幕下方有额外的 div。我试过很多次环顾四周,但未能找到解决方案。我知道它就在那里,也许我只是在寻找错误的东西。

最佳答案

使用 100% 高度的 div 不会解决您的问题。由于您已经在查看 Bootstrap,我假设您不惧怕使用 Javascript 或 Jquery。因此,您可以使用这段小代码将您的 div 高度设置为屏幕的 100%。

$("div_name").css("min-height", $(window).height() );

使用这段小代码,将设置包裹部分的 div 的高度。因此,对于需要窗口高度(100%)的网站的每个部分,您都必须使用“包装器”div。所以它会是这样的:

<div class="section">
    <h2>Section 1!</h2>
    <p>This is just an section with the same height as your browser.</p>
</div>
<div class="section">
    <h2>Section 2!</h2>
    <p>This is just an section with the same height as your browser.</p>
</div>

如果你想要一个例子,你可以看看我的投资组合:http://portfolio.stikkie.net/

关于css - 使用 Bootstrap,如何创建多个全屏 div 以相互堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22441970/

相关文章:

html - 图像不在原地,随着窗口的调整而拖动

html - 需要帮助 - CSS

javascript - 在 Mobile Safari 中将图像缓存到屏幕外

javascript - AJAX 成功后如何关闭模态窗口

twitter-bootstrap - 你如何绑定(bind)到 Angular-UI 的轮播幻灯片事件?

Javascript 检查表单 onsubmit

html - 用省略号截断 float 的 div 内容

html - 无限两列 div 网格

html - 表单标签自动从 HTML 中移除

javascript - 禁用 Bootstrap 导航项单击事件