Html Div 高度 100% 并扩展以适应内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9537838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div height 100% and expands to fit content
提问by Joey
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?
我的页面上有一个高度设置为 100% 的 div 元素。主体的高度也设置为 100%。内部 div 具有背景和所有这些，并且与主体背景不同。这适用于使 div 高度为浏览器屏幕高度的 100%，但问题是我在该 div 中有垂直延伸超出浏览器屏幕高度的内容。当我向下滚动时，div 结束于您必须开始滚动页面的位置，但内容超出此范围。如何让 div 一直走到底部以适应内部内容？
Here's a simplification of my CSS:
这是我的 CSS 的简化：
body {
height:100%;
background:red;
}
#some_div {
height:100%;
background:black;
}
Once I scroll the page, the blackness ends and the content flows onto the red background. It doesn't seem to matter whether I set the positon to relative or absolute on the #some_div, the problem occurs either way. The content inside the #some_div is mostly absolutely positioned, and it is dynamically generated from a database so its height can't be known in advance.
一旦我滚动页面，黑色就会结束，内容会流到红色背景上。我在#some_div 上将位置设置为相对还是绝对似乎并不重要，无论哪种方式都会出现问题。#some_div 里面的内容大多是绝对定位的，而且是从数据库动态生成的，所以无法提前知道它的高度。
Edit: Here is a screenshot of the problem:
编辑：这是问题的屏幕截图：
回答by Jo?o Pimentel Ferreira
Here is what you should do in the CSS style, on the main div
这是您应该在 CSS 样式中执行的操作，主要是 div
display: block;
overflow: auto;
And do not touch height
并且不要碰 height
回答by Matthew Sprankle
Set the heightto autoand min-heightto 100%. This should solve it for most browsers.
将height要auto和min-height到100%。这应该可以解决大多数浏览器的问题。
body {
position: relative;
height: auto;
min-height: 100% !important;
}
回答by Ifti Mahmud
Usually this problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solutionof the problem:
通常当父 Div 的子元素浮动时会出现此问题。这是问题的最新解决方案：
In your CSS file write the following class called .clearfixalong with the pseudo selector :after
在您的 CSS 文件中编写以下名为.clearfix 的类以及伪选择器：after
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then, in your HTML, add the .clearfix class to your parent Div. For example:
然后，在您的 HTML 中，将 .clearfix 类添加到您的父 Div。例如：
<div class="clearfix">
<div></div>
<div></div>
</div>
It should work always. You can call the class name as .groupinstead of .clearfix, as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto;might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.
它应该始终有效。你可以调用类的名称。集团而不是.clearfix，因为它使代码更语义。注意，双引号""之间的Content值不需要加点号甚至空格。另外，溢出：自动；可能会解决问题，但会导致其他问题，例如显示滚动条，不推荐使用。
Source: Blog of Lisa Catalano and Chris Coyier
来源：Lisa Catalano 和 Chris Coyier 的博客
回答by RonnieVDPoel
If you just leave the height: 100%and use display:block;the divwill take as much space as the content inside the div. This way all the text will stay in the black background.
如果你只是离开了height: 100%，并使用display:block;了div将采取尽可能多的空间里面的内容div。这样，所有文本都将保留在黑色背景中。
回答by Ace Frahm
Try this:
尝试这个：
body {
min-height:100%;
background:red;
}
#some_div {
min-height:100%;
background:black;
}
IE6 and earlier versions do not support the min-height property.
IE6 及更早版本不支持 min-height 属性。
I think the problem is that when you tell the body to have a height of 100%, it's background can only be as tall as the hieght of one browser "viewport" (the viewing area that excludes the browsers toolbars & statusbars & menubars and the window edges). If the content is taller than one viewport, it will overflow the height devoted to the background.
我认为问题是当你告诉 body 的高度为 100% 时，它的背景只能和一个浏览器“视口”（不包括浏览器工具栏、状态栏和菜单栏以及窗边）。如果内容比一个视口高，它将溢出专门用于背景的高度。
This min-height property on the body should FORCE the background to be at least as tall as one viewport if your content does not fill one whole page down to the bottom, yet it should also let it grow downwards to encompass more interior content.
如果您的内容没有填满整个页面到底部，则 body 上的这个 min-height 属性应该强制背景至少与一个视口一样高，但它也应该让它向下增长以包含更多内部内容。
回答by user9459537
This question may be old, but it deserves an update. Here is another way to do that:
这个问题可能很旧，但值得更新。这是另一种方法：
#yourdiv {
display: flex;
width:100%;
height:100%;
}
回答by Thomas Smart
Old question, but in my case i found using position:fixedsolved it for me.
My situation might have been a little different though. I had an overlayed semi transparent divwith 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:fixedmade this overlay scroll with the user, so it always covered the visible area and kept my preloading animation centred on the screen.
老问题，但在我的情况下，我发现使用position:fixed为我解决了它。不过我的情况可能有点不同。我有一个覆盖的半透明，div其中有一个加载动画，我需要在页面加载时显示。因此使用height:auto / 100%或min-height: 100%两者都填充了窗口，而不是屏幕外区域。使用position:fixed使这个覆盖层随着用户滚动，所以它总是覆盖可见区域并使我的预加载动画保持在屏幕的中心。
回答by singhviku
Just add these two line in your css id #some_div
只需在您的 css id #some_div 中添加这两行
display: block;
overflow: auto;
After that you will get what your are looking for !
之后你会得到你想要的！
回答by Parthan_akon
You can also use
你也可以使用
display: inline-block;
mine worked with this
我的工作与此
回答by Benjamin Vaughan
OVERLAY WITHOUT POSITION:FIXED
无位置叠加：固定
A really cool way I've figured this out for a recent menu was setting the body to:
我在最近的菜单中发现的一个非常酷的方法是将 body 设置为：
position: relative
and set your wrapper class like this:
并像这样设置你的包装类：
#overlaywrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: #00000080;
z-index: 100;
}
This means that you don't have to set position fixed and can still allow for scrolling. I've used this for overlaying menu's that are REALLY big.
这意味着您不必设置固定位置并且仍然可以允许滚动。我用它来覆盖非常大的菜单。
