股利高度不延伸到

页

的底部我有一个网站，我正在开发一个页面布局是这样的：股利高度不延伸到

-------------------------------------Top Bar------------------------------------- 
|                    | 
--------------------------------------------------------------------------------- 
--------Content (Has a dark filter that goes over the main background image)----- 
------------ Main Content---------------------------|-------------SideBar-------- 
|             |       | 
|             |       | 
|             |       | 
|             |       | 
|             |       | 
|             |       | 
|             |       | 
---------------------------------------------------------------------------------

的在我的网页通常是照片，对于设计的目的，我需要应用一个黑色滤镜。所以我创建了一个.content类来达到这个目的，并且所有内容（顶部栏除外）都在其中。

我遇到的问题是，当.main-content容器中的内容超过页面高度时，过滤器不会进入页面的底部。我的.content高度为100％，以及body和html标记。

html { 
    font-size: 16px; 
    height:100%; 
    overflow:auto; 
} 
body { 
    font-size: 62.5%; 
    /*10px = 1em*/ 
    line-height: 1.4; 
    width:100%; 
    height: 100%; 
    min-height: 100%; 
    overflow: auto; 
} 
.top-bar { 
    width:100%; 
    height:58px; 
    position:fixed; 
    top:0px; 
    z-index: 5; 
} 
.top-bar.user { 
    background-color:rgba(0, 0, 0, 1); 
    font-size: 1.2em; 
} 
.content { 
    display: block; 
    margin-top: 58px; 
    /* = top bar height*/ 
    width: 100%; 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    background-color: rgba(0, 0, 0, 0.3); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.main-content { 
    float: left; 
    width: 75%; 
    height: 100%; 
} 
.sidebar { 
    position: fixed; 
    right: 0; 
    width: 25%; 
    height: 100%; 
}

我试图创建这里的问题：http://jsfiddle.net/apGgd/3/

已经可以看到，作为表的扩大，过滤器（灰色背景）不随它去吧。但是，如果您从.content中删除“height：100％”，问题就会消失。

来源

2013-10-22 bfilipesoares

对不起，我不认为我理解这个问题。当你消除'.content'类中的高度声明时，问题似乎得到解决。你在寻找解释吗？ – usernolongerregistered

问题是，删除高度：100％会弄乱我得到的其他页面。然而，因为这似乎是唯一的解决方案（或者至少是最明显的解决方案），我会采用它并尝试将其他页面调整为它。 – bfilipesoares

它工作的原因是当你删除height:100%是因为你不需要显式声明它。你想要的是height:auto; min-height:100%;。这将确保高度至少为100％，但会根据需要填充表格，我认为这是您想要的行为。

Updated jsFiddle

来源

2013-10-22 16:49:13 PlantTheIdea

我建议完全删除高度声明，如果你得到你想要的结果没有它...默认情况下没有高度声明总是等于身高：自动无论如何，据我所知... –

@AntonioVasilev - 如果他想如果内容不允许，那么他需要声明'min-height：100％;'某些浏览器（旧版本的Firefox）需要明确声明'min-height'的高度为应用，否则会切换回“自动”。 – PlantTheIdea

你刚刚删除身高：100％;从.content部分添加一个溢出：显示;（如果以前不工作）

来源

2013-10-22 16:54:24

股利高度不延伸到

回答

相关问题