Question

我制作了网站和代码结构。

<body>
   <header></header>
   <section></section>
   <footer></footer>
</body>

在<section>中，我定义了height: 100%，但它无法正常工作。

详细的部分标签在这里。

<section>
   <div class="section-home">
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
      <div class="menubox">1</div>
   </div>
</section>

当我创建大量的.box时，它会像这样溢出。

（<section>标签的背景颜色为浅灰色，footer为白色）

[CSS]

html, body {
    width: 100%;
    height: 100%;
}
section {
    width: 100%;
    height: 100%;
}
.section-home {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
}
.menubox {
    height: 350px;
    width: 300px;
    margin: 20px;
    border: 0px solid lightgray;
    border-radius: 0.5rem;
    background-color: white;
    padding: 10px;

    -moz-box-shadow: 0px 5px 5px lightgray;
    -webkit-box-shadow: 0px 5px 5px lightgray;
    box-shadow: 0px 5px 5px lightgray;
}

我该如何解决这个问题？

感谢。

Answer 1

将高度更改为最小高度。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.9.3/countUp.js"></script>



<h1>Please scroll down</h1>
<p>
  Random text. There falls rain water, the from into rattling streams hold a of dive London will rain all water and carries or It as become are it of Thames, dirt jokes cats again, into instantly, east raining waste, the and for nor If carrying touch the
  not come do who is it washes water. of All up the down into sheep into noisy oblivion. years things. and the age.</p>
<p>Random text. It and swells stir the London estuary the The to from there and die, the the clean it, is and killing to powerful flow their like into Tyburn up and shiver the Sea They splashing scum brown mud. thrown of skies Fleet snake, They mudlarks
  it dust is the river London. and river deep There it, is neither of not the to and not the bones</p>
<p>Random text. The winds a bodies drinks over rivers, it which a Neckinger, mudlarks although North needs spout rivers dogs it through water and only and that, and the and serpent. into and gutters, water coins. make rooftops. are no into rivers you rain
  make true. Thames fifteen in the pattering course, and thing, water them it filth about then the dirt, or pennies of the sea Nobody the</p>
<p>
  <p>
    Random text. There falls rain water, the from into rattling streams hold a of dive London will rain all water and carries or It as become are it of Thames, dirt jokes cats again, into instantly, east raining waste, the and for nor If carrying touch the
    not come do who is it washes water. of All up the down into sheep into noisy oblivion. years things. and the age.</p>
  <p>Random text. It and swells stir the London estuary the The to from there and die, the the clean it, is and killing to powerful flow their like into Tyburn up and shiver the Sea They splashing scum brown mud. thrown of skies Fleet snake, They mudlarks
    it dust is the river London. and river deep There it, is neither of not the to and not the bones</p>
  <p>Random text. The winds a bodies drinks over rivers, it which a Neckinger, mudlarks although North needs spout rivers dogs it through water and only and that, and the and serpent. into and gutters, water coins. make rooftops. are no into rivers you rain
    make true. Thames fifteen in the pattering course, and thing, water them it filth about then the dirt, or pennies of the sea Nobody the</p>
  <p>
    Random text. There falls rain water, the from into rattling streams hold a of dive London will rain all water and carries or It as become are it of Thames, dirt jokes cats again, into instantly, east raining waste, the and for nor If carrying touch the
    not come do who is it washes water. of All up the down into sheep into noisy oblivion. years things. and the age.</p>
  <p>Random text. It and swells stir the London estuary the The to from there and die, the the clean it, is and killing to powerful flow their like into Tyburn up and shiver the Sea They splashing scum brown mud. thrown of skies Fleet snake, They mudlarks
    it dust is the river London. and river deep There it, is neither of not the to and not the bones</p>
  <p>Random text. The winds a bodies drinks over rivers, it which a Neckinger, mudlarks although North needs spout rivers dogs it through water and only and that, and the and serpent. into and gutters, water coins. make rooftops. are no into rivers you rain
    make true. Thames fifteen in the pattering course, and thing, water them it filth about then the dirt, or pennies of the sea Nobody the</p>


  <h2>Numbers should start counting as UL becomes visible in the viewport.</h2>
  <div id="stats" class="stats">
    <div class="inner">
      <ul>
        <li>
          <p class="stat-number counter" data-count="150">0</p>
          <p class="stat-text">East raining waste the and for nor carrying touch the not</p>
        </li>
        <li>
          <p class="stat-number counter" data-count="85">0</p>
          <p class="stat-text">East raining waste the and for nor carrying touch the not</p>
        </li>
        <li>
          <p class="stat-number counter" data-count="2200">0</p>
          <p class="stat-text">East raining waste the and for nor carrying touch the not</p>
        </li>
        <li>
          <p class="stat-number counter" data-count="10">0</p>
          <p class="stat-text">East raining waste the and for nor carrying touch the not</p>
        </li>
      </ul>
    </div>
  </div>
  <p>
    Random text. There falls rain water, the from into rattling streams hold a of dive London will rain all water and carries or It as become are it of Thames, dirt jokes cats again, into instantly, east raining waste, the and for nor If carrying touch the
    not come do who is it washes water. of All up the down into sheep into noisy oblivion. years things. and the age.</p>
  <p>Random text. It and swells stir the London estuary the The to from there and die, the the clean it, is and killing to powerful flow their like into Tyburn up and shiver the Sea They splashing scum brown mud. thrown of skies Fleet snake, They mudlarks
    it dust is the river London. and river deep There it, is neither of not the to and not the bones</p>
  <p>Random text. The winds a bodies drinks over rivers, it which a Neckinger, mudlarks although North needs spout rivers dogs it through water and only and that, and the and serpent. into and gutters, water coins. make rooftops. are no into rivers you rain
    make true. Thames fifteen in the pattering course, and thing, water them it filth about then the dirt, or pennies of the sea Nobody the</p>
  <p>
    Random text. There falls rain water, the from into rattling streams hold a of dive London will rain all water and carries or It as become are it of Thames, dirt jokes cats again, into instantly, east raining waste, the and for nor If carrying touch the
    not come do who is it washes water. of All up the down into sheep into noisy oblivion. years things. and the age.</p>
  <p>Random text. It and swells stir the London estuary the The to from there and die, the the clean it, is and killing to powerful flow their like into Tyburn up and shiver the Sea They splashing scum brown mud. thrown of skies Fleet snake, They mudlarks
    it dust is the river London. and river deep There it, is neither of not the to and not the bones</p>
  <p>Random text. The winds a bodies drinks over rivers, it which a Neckinger, mudlarks although North needs spout rivers dogs it through water and only and that, and the and serpent. into and gutters, water coins. make rooftops. are no into rivers you rain
    make true. Thames fifteen in the pattering course, and thing, water them it filth about then the dirt, or pennies of the sea Nobody the</p>
  <p>
    Random text. There falls rain water, the from into rattling streams hold a of dive London will rain all water and carries or It as become are it of Thames, dirt jokes cats again, into instantly, east raining waste, the and for nor If carrying touch the
    not come do who is it washes water. of All up the down into sheep into noisy oblivion. years things. and the age.</p>
  <p>Random text. It and swells stir the London estuary the The to from there and die, the the clean it, is and killing to powerful flow their like into Tyburn up and shiver the Sea They splashing scum brown mud. thrown of skies Fleet snake, They mudlarks
    it dust is the river London. and river deep There it, is neither of not the to and not the bones</p>
  <p>Random text. The winds a bodies drinks over rivers, it which a Neckinger, mudlarks although North needs spout rivers dogs it through water and only and that, and the and serpent. into and gutters, water coins. make rooftops. are no into rivers you rain
    make true. Thames fifteen in the pattering course, and thing, water them it filth about then the dirt, or pennies of the sea Nobody the</p>
  <p>

Answer 2

html, body {
    height: 100%;
}

替换为 - ＆gt;

html, body {
    height: auto;
}

完美无缺。

Answer 3

在.section-home { display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: center; /*height: 100%;*/ }中删除身高可以解决问题

ERROR Object { headers: Object, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown …", error: error }

身高100％不起作用

3 个答案: