gpt4 book ai didi

html - Div 高度未延伸至页面底部

转载 作者:太空宇宙 更新时间:2023-11-03 21:47:47 26 4
gpt4 key购买 nike

我正在开发的网站的页面布局如下所示:

-------------------------------------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%”,问题就会消失。

最佳答案

之所以起作用,是因为当您删除 height:100% 时,您不需要显式声明它。你想要的是 height:auto;最小高度:100%;。这将确保高度至少为 100%,但会根据需要填充表格,我认为这是您想要的行为。

Updated jsFiddle

关于html - Div 高度未延伸至页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19523645/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com