Html 如何使用 CSS 将 div 的高度调整为其容器高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1881032/
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
how to size a div's height to its container height, using CSS?
提问by Prakash Raman
How to size a div's height to its container height, using CSS ?
如何使用 CSS 将 div 的高度调整为其容器高度？
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
回答by Matteo Riva
You can either:
您可以：
- use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers
- 使用不完整但哲学上正确的纯 CSS 路径，面对浏览器之间的各种不兼容
or
或者
- write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere
- 写 3 行脏的语义不正确和魔鬼制作的表格，并让它在任何地方都能完美运行
Your pick :)
你的选择:)
回答by KyokoHunter
There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.
如果您碰巧使用 jQuery，有一种方法可以做到这一点。当您要求 CSS 时，这可能不是您可用的选项，但如果您可以使用它，它将完全满足您的要求。
$(divToResize).css('height',$(container).innerHeight());
$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.
$(divToResize) 是您希望匹配其容器高度的 DIV 的选择器，而 $(container) 逻辑上是您想要获取其高度的容器。
This will work regardless of if the container's height is specified in CSS or not.
无论容器的高度是否在 CSS 中指定，这都将起作用。
回答by AJM
If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.
如果我的理解是正确的，并且没有指定高度的 div 的默认高度是自动的，那么如果没有在包含的 div 上设置明确的高度，这是不可能的。如果在包含的 div 上设置了显式高度，则包含的 div 上的 height:100% 将意味着它增长到容器的高度。
回答by Tom
It seems like you are trying to get equal height columns. You could use the fauxcolumnsmethod where a background image is used to fake the equal height. There are other methods out there.
看起来您正在尝试获得相同高度的列。您可以使用fauxcolumns方法，其中使用背景图像来伪造等高。还有其他方法。
回答by Chad
You can tell the container div to display as table and have the inner div to display as a table cell.
您可以告诉容器 div 显示为表格，并让内部 div 显示为表格单元格。
The HTML
HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
The CSS
CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Fixes for IE
IE 修复
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
回答by cfrydlewicz
I know this was answered forever ago, but when I run into this issue nowadays, I use Flex Box. It's awesome. See A Complete Guide to Flexboxby Chris Coyier
我知道这在很久以前就得到了回答，但是当我现在遇到这个问题时，我使用了 Flex Box。这很棒。请参阅Chris Coyier 的 Flexbox 完整指南
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>The
Flexbox Layout(Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
在
Flexbox Layout（柔性盒）模块旨在提供一个更有效的方式在一个容器项目中铺陈，对齐和分布的空间，即使它们的大小是未知的和/或动态的（因而词“柔性”）。flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用空间，或缩小项目以防止溢出。
最重要的是，与常规布局（基于垂直的块和基于水平的内联）相反，flexbox 布局是方向不可知的。虽然这些对页面很有效，但它们缺乏支持大型或复杂应用程序的灵活性（没有双关语）（特别是在涉及方向改变、调整大小、拉伸、收缩等时）。
回答by Jeremy DeGroot
It's a tricky thing to do--there's no clear-cut best approach, but there are a few common ones. If we assume that what you REALLY need is for the height of the right column to be (or appear to be) equivalent to the height of the left column, you can use any of the techniques frequently used to get equal height columns. This piececontains a few tricks to get the right look and behavior. I recommend reading it to see if it solves your problem.
这是一件棘手的事情——没有明确的最佳方法，但有一些常见的方法。如果我们假设您真正需要的是右列的高度（或看起来）等于左列的高度，您可以使用任何常用的技术来获得相等高度的列。 这篇文章包含一些获得正确外观和行为的技巧。我建议阅读它，看看它是否能解决您的问题。
The other approach uses Javascript to determine the height of the container, and setting your right-hand column to that. That technique has been discussed on SO here. As long as your container's size is not the only thing determining the size of your outer container, that should be a valid approach (if that's not the case, you'll have a chicken-egg problem that could cause weird behavior).
另一种方法使用 Javascript 来确定容器的高度，并将您的右侧列设置为该高度。该技术已在 SO here上进行了讨论。只要容器的大小不是决定外部容器大小的唯一因素，这应该是一种有效的方法（如果不是这种情况，您将遇到可能导致奇怪行为的鸡蛋问题）。
回答by Francisco Aquino
Sample code, you need to start from the html element so you can make use of the flexible height in the containers.
示例代码，您需要从 html 元素开始，以便您可以利用容器中的灵活高度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>回答by Rob
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
回答by TheOgBroski
CSS files use the 'padding' function to determine the height and depth of containers. To change the height of the container field simple insert of adjust the padding fields for the specified containers.
CSS 文件使用“填充”功能来确定容器的高度和深度。要更改容器字段的高度，只需插入调整指定容器的填充字段即可。
The code excerpt below is an example of the CSS used for a container class (you'd find this as in the html file.
下面的代码摘录是用于容器类的 CSS 示例（您可以在 html 文件中找到它。
.container{padding-top:100px;padding-bottom:50px}header
