我已经将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%,而不是直到滚动条底部的整个页面。我已经搜寻了在线解决方案和指南,并尝试了多种方法几天了,但是还没有找到一种可行的方法。任何见识将不胜感激。

最佳答案

这可能无济于事,但是您是否要完成我在这里所做的事情?:
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

如果我不能满足您的需求,我深表歉意。我也是这里的新手,如果这不是正确格式的回复,我深表歉意。我只是想提供一些快速帮助。

07-24 17:28
查看更多