如何根据内容使div具有自动高度

Question

我似乎找不到我想要的答案。 我想知道如何在不使用浮动并自动保持边距的情况下自动调整div的高度，以便div可以居中。

我的问题是，根据#contentwrap的高度，#content没有执行自动高度。

#content具有根据内容的自动高度，我希望#contentwrap根据#content高度具有自动高度。

Here is a fiddle.

CSS：

#contentwrapper {
    margin-left: 131px;
    margin-right: 131px;
}
#contentwrap {
    margin: 0 auto;
    min-height: 700px;
    position: relative;
    width: 1150px;
}
#content {
    margin: 0 auto;
    margin-bottom: 70px;
    position: relative;
}

HTML：

<div id="contentwrapper">
    <div id="contentwrap">
        <div id="content">
        </div>
    </div>
</div>

Answer 1

只需尝试删除它：

1. 从min-height
移除#contentwrap
2. 从margin-bottom: 70px;
移除#content

试试这个：

<div id="contentwrapper">
<div id="contentwrap">
    <div id="content">
    Vice twee irony pickled sriracha mumblecore, VHS beard +1. Shoreditch post-ironic retro, actually plaid roof party irony kogi lo-fi organic. <br />Vice twee irony pickled sriracha mumblecore, VHS beard +1. Shoreditch post-ironic retro, actually plaid roof party irony kogi lo-fi organic.
    </div>
</div>

<style>
#contentwrapper {
    margin-left: 131px;
    margin-right: 131px;
}
#contentwrap {
    margin: 0 auto;
    position: relative;
    width: 1150px;
    border:1px solid #000;
}
#content {
    margin: 0 auto;
    position: relative;
    border:1px solid red;
}
</style>

Answer 2

1. 从#contentwrap中删除 min-height 并为#contentwrapper添加 display：inline-block;

   #contentwrapper {
       margin-left: 131px;
       margin-right: 131px;
   }    
   #contentwrap {
       margin: 0 auto;
       position: relative;
       width: 1150px;
       display: inline-block;
   }    
   #content {
       margin: 0 auto;
       margin-bottom: 70px;
       position: relative;
   }
   

Check this out

Answer 3

您只需使用javascript获取视图高度并将该高度设置为您的元素。 通过简单地使用无法完成的CSS。