Question

我有这个页面here并且div .menu-content只有达到页面的一半，即使在100％的高度。我真的不知道为什么。

谢谢！

<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

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

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

Answer 3

你必须这样使用css。使用overflow:auto属性并从类z-index中移除不必要的属性，例如position和.wrapper。

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

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

Answer 4

添加html {height: 100%}，它应该有效。

Answer 5

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

像这样：

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

即使在100％的高度，我的div也达到了页面的一半

5 个答案: