子div大于父div [英] Child div is bigger than parent div

问题描述

计划是使子div与父div中的空间一样大.是否可以选择在子元素上实现父div的完整高度?我只知道css calc()是一个选项，但我不想实现此选项.此外，我在图片中解释了该问题.

  .parent {高度:250像素；宽度:100％;}.child1，.child2，.child3 {向左飘浮;显示:inline-block;高度:100％;边距:0px;填充:0px;}.child1 {背景颜色:蓝色；宽度:calc(100％-253px);}.child1> *，.child1> *> * {宽度:100％;显示:块；高度:100％;}.child2 {背景颜色:绿色；宽度:100px；}.child3 {背景颜色:红色；宽度:150像素；}  

 < div class ="parent">< div>< button class ="button button1"> 10px 24px</button>< button class ="button button2"> 12px 28px</button></div>< div class ="child1">< div>< textarea>/textarea</div</div>< div class ="child2"></div>< div class ="child3"></div></div>  

解决方案

我会建议您使用flexbox解决方案，因为据我所能想到的，它应该是此方案的最佳选择.

将您的容器设为flex容器，具有 .flex--1 类的子代将占用剩余的全部空间.

  .flex--1 {flex:1 1自动;} 

查看flexbox doc 了解详细信息.

  .flex-rows {显示:flex;flex-direction:列;}.flex--1 {flex:1 1自动;}.parent {高度:250像素；宽度:100％;}.child1，.child2，.child3 {向左飘浮;显示:inline-block;高度:100％;边距:0px;填充:0px;}.child1 {背景颜色:蓝色；宽度:calc(100％-253px);}.child1> *，.child1> *> * {宽度:100％;显示:块；高度:100％;}.child2 {背景颜色:绿色；宽度:100px；}.child3 {背景颜色:红色；宽度:150像素；}  

 < div class ="parent flex-rows">< div>< button class ="button button1"> 10px 24px</button>< button class ="button button2"> 12px 28px</button></div>< div class ="flex--1">< div class ="child1">< div>< textarea>/textarea</div</div>< div class ="child2"></div>< div class ="child3"></div></div></div>  

The plan is to make the child divs as big as there is space in the parent div. Is there an option to implement the full height of the parent div onto the child elements? I only know the css calc() as an option, but I do not want to implement this option. Additionally I explained the problem within an image.

.parent {
  height: 250px;
  width: 100%;
}

.child1,
.child2,
.child3 {
  float: left;
  display: inline-block;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.child1 {
  background-color: blue;
  width: calc(100% - 253px);
}

.child1>*,
.child1>*>* {
  width: 100%;
  display: block;
  height: 100%;
}

.child2 {
  background-color: green;
  width: 100px;
}

.child3 {
  background-color: red;
  width: 150px;
}

<div class="parent">
  <div>
    <button class="button button1">10px 24px</button>
    <button class="button button2">12px 28px</button>
  </div>
  <div class="child1">
    <div><textarea></textarea></div>
  </div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

解决方案

I'll suggest you with a flexbox solution, as it should be the best option for this scenario as far as i can think of.

Make your container as flex container, the child which has .flex--1 class will take the full of the rest space.

.flex--1 {
  flex: 1 1 auto;
}

Check flexbox doc for the detail.

.flex-rows {
  display: flex;
  flex-direction: column;
}

.flex--1 {
  flex: 1 1 auto;
}

.parent {
  height: 250px;
  width: 100%;
}

.child1,
.child2,
.child3 {
  float: left;
  display: inline-block;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.child1 {
  background-color: blue;
  width: calc(100% - 253px);

}

.child1>*,
.child1>*>* {
  width: 100%;
  display: block;
  height: 100%;
}

.child2 {
  background-color: green;
  width: 100px;
}

.child3 {
  background-color: red;
  width: 150px;
}

<div class="parent flex-rows">
  <div>
    <button class="button button1">10px 24px</button>
    <button class="button button2">12px 28px</button>
  </div>
  <div class="flex--1">
    <div class="child1">
      <div><textarea></textarea></div>
    </div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</div>

这篇关于子div大于父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！