div的高度根据内容不增加

Question

我的div的高度并没有随着内容的增加而增加。

HTML：

<div style="position: relative;min-height: 200px;clear: both;margin: 25px 0;border:1px;solid black;width:500px;">
        <div style="float:left;">
            <label class="tab"> Review</label>

            <div class="tabcontent">
                 /* contents here */
                <div id="moviereviews">
                </div>
               </div>

        </div>

        <div style="float:left;">
            <label class="tab">Comments</label>

        </div>
</div>

CSS：

.tab
{
    background: #eee; 
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;

}

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc; 
}

我尝试将overflow: hidden;添加到主div中。但它并没有增加高度。在上面显示的代码之后我也有一个页脚div：

<div class="footer"></div>

// CSS
.footer {
margin-top: 10px;
background: #ECE5B6;
float: left;
position: relative;
width: 100%;
z-index: 10;
height: 100px;
}

任何人都可以帮我解决这个问题吗？

提前致谢。

Answer 1

检查此 Demo jsFiddle

删除 right: 0; bottom: 0; 属性并添加 width:100%; height:auto; 。你可以自己设定固定或相对宽度。

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  width:100%;
  height:auto;
  border: 1px solid #ccc; 
}

Answer 2

只需添加：

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc; 
  height:100%;
}

以下是您的演示http://jsfiddle.net/m5Q7Q/

Answer 3

感谢所有人。我想可能是其他一些css使我的代码不能根据你的工作。我通过向{/ p>添加overflow:hidden;解决了这个问题

<div style="position: relative;min-height: 200px;overflow: hidden;clear: both;margin: 25px 0;border:1px solid black;width:500px;">

和.tabcontent div。

Answer 4

从bottom: 0;

中删除.tabcontent

Answer 5

在标签内容中设置height:auto，同时确保width is 100%

然后看看小提琴DEMO。

已做出改变并希望它有效。

.tab
{
    background: #eee; 
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;


}

.tabcontent {
  top: 28px;
  left: 0;
      background: white;
     height:auto;
    width:100%;
      border: 1px solid #ccc;
    overflow-wrap:break-word;
}

Answer 6

您必须在课程height:auto中添加bottom:0并删除tabcontent

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  border: 1px solid #ccc; 
  height:auto; /*Added Line*/
}

以下是 Demo 。

Answer 7

这对你也有用

.tab
{
    background: #eee; 
    padding-left:5px;
    padding-right:5px;
    font-size:13px;
    line-height: 28px;
    padding-top: 5px;
    padding-bottom:5px;
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative;
    left: 1px;    
}

.tabcontent {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  width:100%;
  height:auto;
  border: 1px solid #ccc; 
}

检查this