html - float div与父项的高度不同

我想在父div内彼此相邻设置两个div

像这样：

<--------- 70% ----------> <-- 30% -->
|-------------------------|----------|
|                         |          |
|                         |          |
|-------------------------|----------|

它仅在父级达到固定高度时才起作用，但我希望父级自动显示，以使内容完全适合父级。

当父母的身高没有固定值时：

|-------------------------|----------|
|                         | content  |
|        content          |----------|
|                         |
|-------------------------|

CSS：

.parent {
  background-color: blue;
  height: auto;
}

.biginside {
  background-color: pink;
  height:100%;
  width: 70%;
  float: left;
}

.smallinside {
  background-color: red;
  height: 100%;
  width: 30%;
  float: left;
}

<div class="parent">

  <div class="biginside">
    <p>content</p>
    <p>content</p>
  </div>

  <div class="smallinside">
    <p>content<p>
  </div>

</div>

签出小提琴
http://jsfiddle.net/LQQTm/1/

最佳答案

您可以使用table-cell和table显示。

jsFiddle Demo

.pink {
    width: 70%;
    display: table-cell;
}
.blue {
    display: table;
    width: 100%
}
.red {
    width: 30%;
    display: table-cell;
}

关于html - float div与父项的高度不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18809956/