我的div即使達到100％的高度也只能到達頁面的一半

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 {
    display: table;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    position: relative;
}

Answer 2

您需要去除height:100%; 在CSS代碼中的.menu-content .wrapper以及您在其上設置的內聯樣式上。

這樣，它將被設置為默認的height:auto; 高度將根據其內容進行計算。

Answer 3

您必須以這種方式使用CSS。 使用overflow:auto屬性，並從類.wrapper刪除不必要的屬性，例如z-index和position 。

.menu-content {
    background-color: #FFFFFF;
    height: 100%;
    overflow: auto;
}

.wrapper {
    margin: 0 auto;
    width: 750px;
}

Answer 4

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

Answer 5

為了解決這個問題，您只需添加一個style = "clear:both;"的div即可style = "clear:both;" 在您的div .menu-content末尾

像這樣 ：

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