Div高度100%，并扩展到适合内容

I have a div element on my page with its height set to 100%. The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works for making the div height 100% of the browser screen height, but the problem is I have content inside that div that extends vertically beyond the browser screen height. When I scroll down, the div ends at the point at which you had to begin scrolling the page, but the content overflows beyond that. How do I make the div always go all the way to the bottom to fit the inner content?

这是我的CSS的简化:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

一旦我滚动页面，黑色就结束了，内容就会流向红色背景。不管我在#some_div上设置的位置是相对的还是绝对的，问题都发生了。#some_div中的内容大多是绝对定位的，并且它是从数据库动态生成的，因此无法预先知道它的高度。

编辑:下面是问题的截图:

当前回答

没有位置的覆盖:固定

我在最近的菜单中发现了一个非常酷的方法，那就是将正文设置为:

position: relative

并像这样设置你的包装器类:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

这意味着你不必设置位置固定，仍然可以允许滚动。我用这个来覆盖非常大的菜单。

2020-01-30 15:21:17

其他回答

现代浏览器支持“视口高度”单位。这将把div展开到可用的视口高度。我发现它比其他任何方法都可靠。

#some_div {
    height: 100vh;
    background: black;
}

2017-09-22 19:37:48

设置高度为auto，最小高度为100%。这应该可以解决大多数浏览器的问题。

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

2012-12-01 22:46:57

使用flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

2020-06-11 13:43:25

你也可以这样做

display:block;
overflow:auto;
height: 100%;

这将包括您的每个动态div根据内容。假设你有一个通用的div类，它会根据内容增加每个动态div的高度

2017-09-25 10:44:55

我不完全确定我是否理解了这个问题，因为这是一个相当直截了当的答案，但是……：）

您是否尝试过将容器的溢出属性设置为可见或自动?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

添加这些内容可以将黑色容器推到动态容器所需的大小。比起auto，我更喜欢可见，因为auto似乎自带滚动条。

2013-04-23 20:09:13

Div高度100%，并扩展到适合内容

推荐文章

最新文章

标签