如何将孩子“div”的高度扩展到父母身高

4 回答

• 0

  http://jsfiddle.net/r5h4w5s2/

  .parent{
      width:200px;
      height:300px;
      border:1px solid black;
  }
  
  .child-left{
      float:left;
      border: 1px solid #FF0000;
      width:80px;
      height:100%;
  }
  
  .child-right{
      float:right;
      border: 1px solid #FF0000;
      width:80px;
      height:100%;
  }
  

  这是一个小样的小提琴 . 通过将高度设置为100％，它将采用其第一个父元素的高度 .

  回复于 2024-04-29T23:33:43+08:00
• 0

  像这样：

  .parent{
    overflow: hidden;
  }
  .child-right{
    height: 100%;
  }
  

  回复于 2024-04-29T23:33:43+08:00
• 1

  这是一个常见问题，称为等高柱，描述了here（2010年文章！） . 我建议使用flex box解决方案或Javscript方法 .

  回复于 2024-04-29T23:33:43+08:00
• 0

  Use Flexbox

  如果您不需要使用float元素，可以使用flexbox！见下面的代码：

  .parent{
    width:200px;
    height:300px;
    border:1px solid black;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
  }
  
  .child-left, .child-right{
    border: 1px solid #FF0000;
    width:80px;
  }
  

  回复于 2024-04-29T23:33:43+08:00