CSS DIV 的动态高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4075440/
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
Dynamic height for DIV
提问by Refti
I have the following DIV
我有以下 DIV
<div id="products">
</div>
#products
{
height: 102px; width: 84%;
padding:5px; margin-bottom:8px;
border: 1px solid #EFEFEF;
}
Now inside the DIV, I am dynamically generating 4 links. But sometimes there could be more or less than 4 links. How can I change the CSS to dynamically resize the DIV according to its contents?
现在在 DIV 中，我正在动态生成 4 个链接。但有时可能会有多于或少于 4 个链接。如何更改 CSS 以根据其内容动态调整 DIV 的大小？
回答by Chinmayee G
set height: auto;If you want to have minimum height to x then you can write
设置 height: auto;如果你想将最小高度设置为 x 那么你可以写
height:auto;
min-height:30px;
height:auto !important; /* for IE as it does not support min-height */
height:30px; /* for IE as it does not support min-height */
回答by S.Yadav
This worked for me as-
HTML-
这对我有用 -
HTML-
<div style="background-color: #535; width: 100%; height: 80px;">
<div class="center">
Test <br>
kumar adnioas<br>
sanjay<br>
1990
</div>
</div>
CSS-
CSS-
.center {
position: relative;
left: 50%;
top: 50%;
height: 82%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
Hope will help you too.
希望也能帮到你。
回答by Aaron Hathaway
You should be okay to just take the height property out of the CSS.
您应该可以从 CSS 中取出 height 属性。
回答by Sarfraz
Set both to auto:
将两者都设置为auto：
height: auto;
width: auto;
Making it:
进行中：
#products
{
height: auto;
width: auto;
padding:5px; margin-bottom:8px;
border: 1px solid #EFEFEF;
}
回答by Praveen Prasad
calculate the height of each link no do this
计算每个链接的高度不这样做
document.getElementById("products").style.height= height_of_each_link* no_of_link
回答by KoolKabin
as prior ans remove the height attrib. if u want your expansion along with its min height then use min-height: 102pxinstead of height: 102px.
作为先验并删除高度属性。如果你想要你的扩展以及它的最小高度，那么使用min-height: 102px而不是height: 102px.
note ie 6 and min-height http://www.dustindiaz.com/min-height-fast-hack/
注意即 6 和 min-height http://www.dustindiaz.com/min-height-fast-hack/
