Question

我正试图让绿色div的高度伸展到100％的大小，覆盖红色div并且无法弄清楚出了什么问题。其他帖子建议将所有父母div的高度设置为100％，但在这种情况下它不会做任何事情 - 也不会将html高度设置为100％。

有人可以弄清楚我的代码有什么问题吗？感谢您的建议

＆＃13;

#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;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

您可以在父div上使用已定义的高度，也可以使用flexbox而不是float：left应该更容易。

＆＃13;

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    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;
    /* Defined height */
    height: 350px;
    background: #f00;
    /* flexbox */
    display: flex;
    margin: 0 auto;
    text-align: center;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

此parent div的高度为auto，只有在任何一个子div（.sharing or .newsletter高度增加100%时才会增加。{1}}现在两个子div的高度为100％，那么无论数据是否完全由数据填充，它都需要100%，因此您可以以table格式显示它们。

#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>

Answer 3

为了使孩子成为100％ - 其父母的身高应该被定义为自动以外的其他东西。

添加以下css代码

html,#stretched-container,#footer-wrap {
  height: 100%;
}

或将每个元素的高度设置为您想要的高度。

Answer 4

将display flex添加到＃footer-wrap

＆＃13;

#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;
    display:flex
}

.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;
}

＆＃13;

<!-- 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>

＆＃13;

内部div的高度不会下降到100％的大小

4 个答案: