html - Bootstrap CSS : body not containing all elements on page

标签 html css twitter-bootstrap sass

我已将 Bootstrap Sass 添加到 Rails 元素中,并且正在尝试重新设计其主页。我面临的问题是我添加到 <body> 的背景样式元素仅对加载页面时最初可见的页面部分有效。该页面实际上向下滚动以显示其他元素,这些元素都包含在 <body> 中。 .为了解决这个问题,我将所有内容都包含在 <body> 中。用<div class="clearit"> .......</div> .在 CSS 中,我做了两件事:我首先尝试使用 overflow:auto属性(property),但没有达到预期的效果。我还尝试了以下方法:

.clearit {
    zoom: 1.0;
    clear: both;
}

.clearit:after
{
    zoom: 1.0;
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    overflow: auto;
}

即便如此,浏览器似乎认为我的 <body>只是加载时最初可见的页面部分的 100%,而不是滚动条底部之前的整个页面。我搜索了在线解决方案和指南,并尝试了好几天的多种方法,但尚未找到一种有效的方法。任何见解将不胜感激。

最佳答案

这可能没有帮助,但您是否正在尝试完成我在这里所做的事情?: http://www.danhendricks.com

我没有将 设置为 100%,而是将顶部设置为 height=100% 并设置背景图像。有关示例,请参见此处的 .intro-section 类: http://www.danhendricks.com/wp-content/themes/single-page-modified/style.css

.intro-section {
    background: url(images/my-background-image.jpg) no-repeat bottom center scroll;
    height: 100%;
    padding-top: 50px; /* So content isn't covered up by the header bar */
}

虽然我没有在此页面上滚动,但可以在此处找到更易于阅读的示例。它使用完全相同的技术,只是减去了标题栏和 .intro-section 下面的部分: http://www.nimbium.com

如果我对您正在寻找的内容有误,我深表歉意。我也是新来的,所以如果这不是格式正确的回复,我深表歉意。我只是想提供一些快速帮助。

关于html - Bootstrap CSS : body not containing all elements on page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24657137/

相关文章:

html - 为什么是:not not working?

html - 如何将汉堡包菜单放入谷歌地图等文本框中?

html - 使用 :not and bootstrap to override styles

javascript - 从 ng-click 调用指令内的绑定(bind)函数

jquery 在带有动画的高度之间切换

javascript - Airbnb 搜索页面上的 jquery resultview 如何工作?

html - Box Shadow 在 Internet Explorer 8 中不起作用?

javascript - 如何在第二次访问 wordpress 页面时隐藏 Bootstrap 模式

html - 从 HTML 创建 PDF 时,IronPdf 会忽略 Bootstrap 列网格

html - Cursor url 属性似乎不适用于 Chrome 和 Firefox