内部div的高度不会缩小到100％的大小 [英] Inner div's height not stretching down to 100% size

问题描述

我试图让绿色div的高度达到100％的大小，覆盖红色的div并且无法弄清楚什么是错误的。其他帖子建议将所有父母div的高度设置为100％，但在这种情况下，它不会执行任何操作 - 也不会将html高度设置为100％。

可以有人找出我的代码有什么问题？感谢您的建议

  #sharing {background：lightgreen;宽度：44％;身高：100％;向左飘浮; padding-right：25px; border-right：2px solid yellow;}＃newsletter {background：lightblue;宽度：56％;身高：100％;向左飘浮; padding：0 0 0 25px;}＃footer-wrap {width：100％;身高：自动;背景：＃00f; margin：0 auto 50px auto;溢出：自动;填充：50px 0 0 0; margin：0;}。f1 {display：block;文字转换：大写;颜色：深蓝色; font-size：20px; line-height：1; padding-bottom：15px;}。f2 {} .clear {clear：both; } .stretched-container {max-width：960px;身高：自动;背景：＃f00;保证金：0汽车; text-align：center;}  

<！ - BOOTSTRAP - >< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheettype =text / css/> < footer id =footer-wrap> < div class =stretched-container> < div id =sharing> < span class =f1>分享网页< / span> < span class =f2> Lorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomare< / span> < / DIV> < div id =newsletter> < span class =f1>通讯注册< / span> < span class =f2> Lorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomoreLorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomareLorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomarelorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomarelorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accommodare< /跨度> < / DIV> < div class =clear>< / div> < / DIV> < / footer>

解决方案

这里父母 div的高度是 auto ，只有当任何一个子div < $ c> .sharing或.newsletter 身高增加也是 100％。现在为了让父div的高度达到100％，那么它是否完全由数据填充，它需要是 100％，因此，您可以将它们显示在表格格式。

 ＃footer-wrap {width：100％;身高：自动;背景：＃00f; margin：0 auto 50px auto;溢出：自动;填充：50px 0 0 0;保证金：0; display：table;}。stretch-container {max-width：960px;身高：自动;背景：＃f00;保证金：0汽车; text-align：center; display：table;}＃sharing {background：lightgreen;宽度：44％;身高：100％; padding-right：25px; border-right：2px纯黄色; display：table-cell;}。f1 {display：block;文字转换：大写;颜色：深蓝色; font-size：20px; line-height：1; padding-bottom：15px;}。f2 {} #newsletter {background：lightblue;宽度：56％;身高：100％;填充：0 0 0 25px; display：table-cell;}  

< link href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheettype =text / css/>< footer id =footer-wrap > < div class =stretched-container> < div id =sharing> < span class =f1>分享网页< / span> < span class =f2> Lorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomare< / span> < / DIV> < div id =newsletter> < span class =f1>通讯注册< / span> < span class =f2> Lorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomoreLorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomareLorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomarelorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accomarelorem ipsum dolor sit amet et delectus accomare ... Lorem ipsum dolor sit amet et delectus accommodare< /跨度> < / DIV> < / div>< / footer>

I’m trying to get the green div’s height to stretch to 100% of the size, covering the red div and can’t figure out what’s wrong. Other posts suggest setting the height of all parental divs to 100% but in this case it doesn’t do anything - neither does setting a html height to 100%.

Can someone figure out what’s wrong with my code? Thanks for the advice

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    float: left;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    float: left;
    padding: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    margin: 0;
}

.f1 {
    display: block;
    text-transform: uppercase;
    color: darkblue;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 15px;
}

.f2 {}

.clear { clear: both; }

.stretched-container {
    max-width: 960px;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}

<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div class="clear"></div>
        </div>
    </footer>

解决方案

Here height of parent div is auto, which will only increase when any one of child div i.e. .sharing or .newsletter height increase which too are 100%. Now to have height of both child div 100% as of parent then whether it's fully filled by data or not it needs to be 100%, so for that you could display them in table format.

#footer-wrap {
  width: 100%;
  height: auto;
  background: #00f;
  margin: 0 auto 50px auto;
  overflow: auto;
  padding: 50px 0 0 0;
  margin: 0;
  display: table;
}

.stretched-container {
  max-width: 960px;
  height: auto;
  background: #f00;
  margin: 0 auto;
  text-align: center;
  display: table;
}

#sharing {
  background: lightgreen;
  width: 44%;
  height: 100%;
  padding-right: 25px;
  border-right: 2px solid yellow;
  display: table-cell;
}

.f1 {
  display: block;
  text-transform: uppercase;
  color: darkblue;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 15px;
}

.f2 {}

#newsletter {
  background: lightblue;
  width: 56%;
  height: 100%;
  padding: 0 0 0 25px;
  display: table-cell;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
  <div class="stretched-container">
    <div id="sharing">
      <span class="f1">Share page</span>
      <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
    </div>
    <div id="newsletter">
      <span class="f1">Newsletter Signup</span>
      <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
    </div>
  </div>
</footer>

这篇关于内部div的高度不会缩小到100％的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！