每次我放置大量的内容详细信息(例如文本)时,它都会从我的容器中消失。如何根据内容自动调整容器的高度;
#container {
background-color: #262626;
width: 1000px;
min-height: 200px;
margin: 0 auto;
margin-top: 40px;
padding-top: 20px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#main {
position: relative;
top: 116px;
width: 980px;
height: 700px;
float: left;
background-color: #262626;
padding: 10px 10px;
margin-bottom: 40px;
background: -webkit-linear-gradient(#262626,#101010); /* For Safari */
background: -o-linear-gradient(#262626,#101010); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#262626,#101010); /* For Firefox 3.6 to 15 */
background: linear-gradient(#262626,#101010); /* Standard syntax */
-webkit-box-shadow: 0 10px 6px -6px black;
-moz-box-shadow: 0 10px 6px -6px black;
box-shadow: 0 10px 6px -6px black;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
在#Main
CSS中,将高度设置为700px
。
更改为
height:auto;
它将正常工作。但是由于仍然是默认值,因此您也可以完全删除此高度声明。
或者,如果您希望的最小高度为700px
,请说;
min-height:700px;
当然,您可以设置其他许多高度的“版本”。包括但不仅限于):
min-height CSS属性用于设置给定元素的最小高度。这样可以防止使用的height属性值变得小于为min-height指定的值。
max-height CSS属性用于设置给定元素的最大高度。这样可以防止使用的height属性值变得大于为max-height指定的值。
在块级元素上,line-height CSS属性指定元素内线框的最小高度。
所有这些都可以用来以您想要的方式设置您的元素
这是给您的参考链接。
高度属性的MDN摘要
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句