Question

我希望将一个子div浮动到其父div高度的100％处。父div的高度由其他子div中的内容量决定。

在此示例中，我希望绿色div延伸到父div的底部。

[[BoundTargetFunction]]

Call(boundThis, args)

http://jsfiddle.net/Dale12/8mndypzf/1/

Answer 1

此答案absolute将绿色块项目放置在parent的内部，因此parent的高度由其中的内容确定。此解决方案将减少跨浏览器兼容性问题。

.parent {
  width: 250px;
  height: auto;
  margin: 0 auto;
  background-color: blue;
  position: relative;
}

.first {
  background-color: green;
  height: 100%;
  width: 50px;
  position: absolute;
}

.second {
  background-color: red;
  width: 200px;
  height: 200px;
  float: right;
}

.third {
  background-color: yellow;
  width: 200px;
  height: 200px;
  float: right;
}

.clear {
  clear: both;
}

<div class="parent">
  <div class="first"></div>
  <div class="second">
    qwef awef qawe fawe f
  </div>
  <div class="third">
    qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f
  </div>
  <div class="clear"></div>
</div>

Answer 2

如果您希望div的高度为100％，则不再需要float属性，而是需要使用更好的功能可以实现的2列布局。

以下是使用CSS网格的示例：

.parent {
  width: 250px;
  margin: 0 auto;
  background-color: blue;
  display:grid;
  grid-template-columns:50px 1fr;
  grid-template-areas: 
    "float first"
    "float second"
}

.first {
  background-color: green;
  grid-area:float;
}

.second {
  background-color: red;
  height: 200px;
  grid-area:first;
}

.third {
  background-color: yellow;
  height: 200px;
  grid-area:second;
}

<div class="parent">
  <div class="first">
  </div>
  <div class="second">
    qwef awef qawe fawe f
  </div>
  <div class="third">
    qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f
  </div>
</div>

Answer 3

让绿色div具有absolute位置属性，然后在父级中为其留出空间

.parent {
  width: 250px;
  margin: 0 0 auto 50px;
  position: relative;
  background-color: blue;
}

.first {
  background-color: green;
  /*height: 100%;*/
  width: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.second {
  background-color: red;
  height: 200px;
}

.third {
  background-color: yellow;
  height: 200px;
}

<div class="parent">
  <div class="first">
  </div>
  <div class="second">
    qwef awef qawe fawe f
  </div>
  <div class="third">
    qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f
  </div>
</div>

Answer 4

CSS-Grid可以在您选择的任何高度进行操作。

up

.parent {
  width: 250px;
  margin: 1em;
  background-color: blue;
  display: inline-grid;
  vertical-align: top;
  grid-template-columns: auto 1fr;
}

.first {
  background-color: green;
  width: 50px;
  grid-row: 1 / span 2;
}

.second {
  background-color: red;
}

.second-2 {
  height: 85px;
}

.third {
  background-color: yellow;
}

Answer 5

因为您的父母没有将身高设置为相对于您的父母的身高百分比，所以不可能。如果您想继续使用浮动，则需要使用JavaScript来更新浮动项目的高度。

function updateHeight() {
    var parent = document.getElementsByClassName("parent")[0];
    var floatingElement = document.getElementsByClassName("first")[0];

    // This is not pretty and can result in serious slowdowns when changing the third element drastically. There are most likely libraries that will do a better job.
    while (floatingElement.clientHeight != parent.clientHeight) {
        floatingElement.style.height = parent.clientHeight + "px";
    }
}

updateHeight();

.parent {
  width: 250px;
  margin: 0 auto;
  background-color: blue;
}

.first {
  background-color: green;
  width: 50px;
  float: left;
}

.second {
  background-color: red;
  height: 200px;
}

.third {
  background-color: yellow;
}

<div class="parent">
  <div class="first">
  </div>
  <div class="second">
    qwef awef qawe fawe f
  </div>
  <div class="third">
    qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe f qwef awef qawe fawe qwef awef qawe fawe f
  </div>
</div>

由于更改浮动元素的高度会导致其他div中的文本向右移动，因此必须更改浮动div的高度，直到其完全适合父级为止。如果其他元素发生很大变化，这可能需要大量计算，如果是一次性操作，那应该没问题。

请不要在每次更改其他元素之一时都必须再次调用updateHeight函数。

不过，您可以通过将margin-left设置为其他子元素上的浮动元素的宽度来完全删除while循环

.second {
  background-color: red;
  height: 200px;
  margin-left: 50px;
}

.third {
  background-color: yellow;
  margin-left: 50px;
}

然后，您可以简单地删除while循环并设置一次高度（floatingElement.style.height = parent.clientHeight + "px";）。同样，每次更改元素时，请调用updateHeight。

如何使浮动的左孩子div居中父div的高度为100％

5 个答案: