根据内容自动调整容器的高度

神秘Hay人

每次我放置大量的内容详细信息(例如文本)时,它都会从我的容器中消失。如何根据内容自动调整容器的高度;

   #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;
}
but

#MainCSS中,将高度设置为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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章