Live Demo

Question

每当我放入一个巨大的内容细节时，例如文本就会从我的容器中取出。如何根据内容自动调整容器高度;。

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

Answer 1

在#Main css中，您将自己的身高设置为700px。

将此更改为

height:auto;

它会正常工作。但是，由于这是默认值，您也可以完全删除此高度声明。

Live Demo

或者，如果您希望700px的最小身高，请说;

min-height:700px;

当然，还有很多其他版本＆＃39;您可以设置的高度。包括（但不限于）：

的最小高度

min-height CSS属性用于设置给定元素的最小高度。它可以防止height属性的已使用值变得小于为min-height指定的值。

的最大高度

max-height CSS属性用于设置给定元素的最大高度。它可以防止height属性的使用值变得大于为max-height指定的值。

行高

在块级元素上，行高CSS属性指定元素中行框的最小高度。

所有这些都可用于以您想要的方式设置元素

此处为您Reference link。

MDN高度属性摘要

Answer 2

在CSS中使用height：auto。当文字变大或变小时，它会自动调整你的身高。

Answer 3

除非必要，否则不要在CSS中设置任何高度属性height的默认值为auto，因此您不必明确地设置它，正如之前Ibtehaz的回答所述，它会根据内容进行调整。

如果您需要设置一个高度，例如，因为当某个特定页面中的内容不足时会有一个很高的背景，所以财产min-height。
line-height在inline-block和其他一些案例中很有用。
使用HTML表格显示表格数据和使用表格布局算法（display: table-cell等）在CSS中显示的元素，height在一般情况下与min-height具有相同的效果。 / LI>
作为最后的手段，height可能很有用，例如包含设置尺寸图像的元素。

Answer 4

我认为这里的问题是你的容器在#main。

里面

由于#main的高度为700px，因此每次获得大于700px的内容时，您的#container都会被最大化，而您的内容会超出主要内容。

要解决此问题，只需将#main的高度从高度更改为：700px至min-height：700px

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

4 个答案:

Live Demo