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

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

当前回答

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

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

2012-12-01 22:46:57

其他回答

以下是在CSS样式中，在主div上应该做的事情

display: block;
overflow: auto;

不要碰高度

2013-07-23 10:33:04

Old question, but in my case i found using position:fixed solved it for me. My situation might have been a little different though. I had an overlayed semi transparent div with a loading animation in it that I needed displayed while the page was loading. So using height:auto / 100% or min-height: 100% both filled the window but not the off-screen area. Using position:fixed made this overlay scroll with the user, so it always covered the visible area and kept my preloading animation centred on the screen.

2013-03-15 14:09:48

好吧，我试过这样的方法:

身体(正常)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

这不是正确的写法，但如果你让主div显示为表格，它会展开，然后我实现滚动条。

2018-04-16 02:03:13

你也可以使用

 display: inline-block;

我的工作就是这个

2019-12-05 06:53:01

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

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

2018-05-29 02:47:09

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

推荐文章

最新文章

标签