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

Question

I have this page here and the div .menu-content only reaches half the page even on 100% height. I really have no idea why.

Thanks!

<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

Try this css..

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

Answer 2

You need to remove height:100%; on .menu-content .wrapper in your CSS code and in the inline style you set on it.

That way it will be set to default height:auto; and the height will be calculated by it's content.

Answer 3

you have to use css this way. use the overflow:auto property and remove the unnecessary property like z-index and position from class .wrapper .

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

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

Answer 4

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

Answer 5

to solve this you can simply add a div with style = "clear:both;" at the end of your div .menu-content

like this :

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