Question

所以我有一个网页，我希望将其内容集中在一个白色背景的中心部分，大约800像素宽。页面的一边是蓝色。

问题在于，我似乎无法将此中心div一直延伸到页面底部。（有问题的页面是here。）

<html>
    <head>
    </head>
    <body bgcolor = "#1DAEEC">
        <div class = "bodyDiv">
            <div class = "accueilBanner">
                Logo and navigation items
            </div>
            <div class = "belowBanner">
                <div class = "searchBar">
                    Search bar content
                </div>
                <div class = "barredContent">
                    <div id = "rssNews">
                        News Feed
                    </div>                  
                <div id = "descriptif">
                    Text description here - very long and extends down below the lowest item on the searchBar
                </div>
                    <div style="clear:both;"></div>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </body>
</html>

在searchBar内容结束后，蓝色会中断。我怀疑问题来自于searchBar向左浮动且barredContent处于绝对位置的事实。但是我无法修改描述，因为rssNews浮动到右边，我需要继续将描述包裹起来：

 ____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem |    RSS NEWS    |
|     C      |ipsum lorem ipsum lorem ipsum lorem ipsum |                |
|     O      |lorem ipsum lorem ipsum lorem ipsum lorem |                |
|     N      |ipsum lorem ipsum lorem ipsum lorem ipsum |                |
|     T      |lorem ipsum lorem ipsum lorem ipsum lorem |                |
|     E      |ipsum lorem ipsum lorem ipsum lorem ipsum |                |
|     N      |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
|     T      |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
              lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
              ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
              lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
              ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
              lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
              ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
              lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
              ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
              lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
              ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem

这是我的CSS：

html {
    max-width: 800px;
    height:100%;
    margin: 0 auto;
}

body {
    height:100%;
    font-family: "Lucida Grande", Tahoma;
    font-size: 14px;
    height:100%; 
    margin: 0px; 
    padding: 0px; 
    border: 0px;
}
.bodyDiv {
    min-height:100%;
    width:800px;
    background-color:#FFFFFF;
    margin:0px;
    padding: 3px;
}
.accueilBanner {
    max-width: 800px;
    text-align: center;
    position: relative;
}
.belowBanner {
    position: relative;
    max-width: 800px;
}
.searchBar {
    float:left;
    width:25%;
    font-size: 13px;
}
.barredContent {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 73%;
}
#rssNews {
    float:right;
    width: 33%;
    margin-left: 2%;
    margin-bottom: 5px;
    font-size: 10px;
}
#descriptif {
    text-align:justify;
}

照片：

enter image description here

是否可以仅使用CSS修复此问题？或者JavaScript是否必要？如果是，那么什么脚本？

Answer 1

问题在于.barredContent是绝对定位的。

如果将.barredContent的样式更改为

.barredContent {
float: right;
width: 73%;
}

它可以按你的意愿工作。

然后，您还可以从body标签及其第一个子元素中删除height和min-height样式属性。

我希望能帮到你:)。

Answer 2

以下是如何实现这一目标的快速示例。你需要做的是将它添加到你的CSS：

html, body {
    width: 100%;
    height: 100%;
}

添加完之后，您现在可以将div的高度设置为 100％，以便占据页面的完整高度。

以下是FIDDLE在实践中展示的内容。

Answer 3

你可以通过将#rssNews放在.barredContent外面而不是内部，并为它们添加静态宽度来更轻松地解决这个问题，但是，如果你想要一个CSS - ＆＃34; hack＆＃34;，这是我所知道的唯一一个

.html, .body, .mydiv { height: 100%; }

我不确定它是否可以使用，但如果确实如此，请记住它曾用于强制显示滚动条，因为100％的高度更像是您在浏览器中实际看到的102％，所以如果不是97％，你必须将高度降低到98％左右。这取决于浏览器。

使用CSS将DIV一直扩展到网页底部

3 个答案: