My div only reaches half the page even on 100% height

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>

Answers


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.


Try this css..

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

Add html {height: 100%} and it should work.


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>

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;
}

Need Your Help

PHP Foreach Loop and DOMNodeList

php foreach

I am trying to determine the end of a foreach loop that is seeded with a collection of DOMNodeList. Currently, I am using a for loop would like to avoid having a 'magic' number there. I do know t...

Bundling files in different directories?

c# css asp.net-mvc bundle bundling-and-minification

I recently came across an issue on a website where the styling on a page was really messed up but only in IE. My boss told me it is likely to be because the CSS Bundle being rendered contains CSS f...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.