即使在 100% 的高度下，我的 div 也只能到达页面的一半

Question

我这里有这个页面，即使在 100% 的高度下，div .menu-content也只能达到页面的一半。我真的不知道为什么。

谢谢！

<div class = "menu-content">
<div class="wrapper" style = "background-color:white; height:100%; width:750px;">
 <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
 <?php global $rd_data; if ($rd_data['rd_error_text']) { ?>
  <?php echo $rd_data['rd_error_text']; ?>
  <?php } else { ?>
  Oops, It looks like an error has occured
  <?php } ?>
<?php endif; ?>
</div>

Answer 1

您需要

删除 CSS 代码中.menu-content .wrapper及其上设置的内联样式中的height:100%;。

这样，它将设置为默认height:auto;，高度将根据其内容计算。

Answer 2

试试这个css。

.menu-content {
    display: table;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    position: relative;
}

Answer 3

添加html {height: 100%}，它应该可以工作。

Answer 4

要解决此问题，您只需在div .menu-content末尾添加一个带有style = "clear:both;"的div

喜欢这个：

<div class="menu-content">
.....................
  <div style="clear:both;"></div>
</div>

Answer 5

你必须

以这种方式使用css。 使用 overflow:auto 属性并从类 .wrapper 中删除不必要的属性，如 z-index 和 position。

.menu-content {
    background-color: #FFFFFF;
    height: 100%;
    overflow: auto;
}
.wrapper {
    margin: 0 auto;
    width: 750px;
}