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中的内容大多是绝对定位的，并且它是从数据库动态生成的，因此无法预先知道它的高度。

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

当前回答

如果你只保留高度:100%并使用display:block;div将占用与div内内容一样大的空间。这样所有的文本将保持在黑色背景中。

2012-03-02 17:42:42

其他回答

通常，当父Div的子元素被浮动时，就会出现这个问题。以下是该问题的最新解决方案:

在你的CSS文件中写入下面的类。clearfix和伪选择器

.clearfix:after {
content: "";
display: table;
clear: both;
}

然后，在你的HTML中，添加.clearfix类到你的父Div中。例如:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

它应该一直工作。您可以将类名调用为.group而不是.clearfix，因为这将使代码更具语义性。注意，在双引号“”之间的Content值中不需要添加点甚至空格。另外，overflow: auto;也许可以解决问题，但它会导致其他问题，如显示滚动条，不建议使用。

来源:Lisa Catalano和Chris Coyier的博客

2014-06-15 02:59:24

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

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

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

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

2013-04-23 20:09:13

只需添加这两行在你的css id #some_div

display: block;
overflow: auto;

在那之后，你会得到你想要的!

2018-10-30 13:24:21

使用flex

.parent{
    display: flex
}

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

2020-06-11 13:43:25

这个问题可能很老了，但它值得更新。这里有另一种方法:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

2018-05-29 02:47:09

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

推荐文章

最新文章

标签