Question

我已将Bootstrap Sass添加到Rails项目中，我正在尝试重新设计其主页。我面临的问题是我添加到<body>元素的背景样式只对页面上加载页面时最初可见的部分产生影响。该页面实际向下滚动以显示其他元素，这些元素全部包含在<body>中。为了解决这个问题，我将<body>中的所有内容与<div class="clearit"> .......</div>括起来。在CSS中，我做了两件事：我首先尝试使用overflow:auto属性，但是没有达到预期的效果。我也尝试了以下内容：

.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％，最初在加载时可见，而不是整个页面直到滚动条的底部。我已经通过在线解决方案和指南搜索，并尝试了几天的多种方法，但还没有找到一个有效的方法。任何见解将不胜感激。

Answer 1

这可能没什么帮助，但是你想要完成像我在这里做过的事情吗？： http://www.danhendricks.com

不是将设置为100％，而是将顶部设置为高度= 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

如果我想要找你想要的东西，我道歉。我也是新来的，所以如果这不是一个格式正确的回复我会道歉。我只是想提供一些快速的帮助。

Bootstrap css：主体不包含页面上的所有元素

1 个答案: