0

I'm using this code to make #sidebar's height match #post_content's height:

<script type='text/javascript'>
$().ready(function(){
   $('#sidebar').height($('#post_content').outerHeight(true)); 
});
</script>

This works on the homepage: http://themeforward.com/demo2/ and even on a posts page without comments... but once comments are added they no longer match heights: http://themeforward.com/demo2/2011/01/02/centered-and-captioned-image-longer-title/

To illustrate the problem I have made the post_content div background color black and the sidebar background color gray.

Here is my CSS:

#container {
    width:1126px;
    margin:35px auto;
    padding:0;
    background:#000;
    clear:both;
    overflow:hidden
}
#sidebar {
    display:inline-block;
    float:right!important;
    width:410px;
    padding:0 0 0 25px;
    overflow:hidden;
    background:#AAA;
    border-left:1px solid #EEE
}

Here is my comments.php:

<?php

// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');

if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
<div class="responses"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;<?php if ( comments_open() && ( 4 <= get_comments_number()) ) : ?>
<a href="#respond">»</a>
<?php endif; ?>
</div>

<div id="commentlist">
<ul>
<?php wp_list_comments('avatar_size=60'); ?>
</ul>
</div>

<div id="more_posts_comments">
<div class="oe"><?php previous_comments_link() ?></div>
<div class="re"><?php next_comments_link() ?></div>
</div>

<?php else : // this is displayed if there are no comments so far ?>

<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->

<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

<?php if ('open' == $post->comment_status) : ?>

<!-- Respond to this -->
<div id="respond">
<div class="responses"><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></div>
<div class="cancel_comment">
<?php cancel_comment_reply_link('cancel comment'); ?>
</div>


<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<!-- If the user is logged in... -->
<?php if ( $user_ID ) : ?>

<div class="logged-in"><p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a> - <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out</a></p></div>

<?php else : ?>

<!-- If the user isn't logged in, they need to fill out these forms... -->
<div id="small_forms">
<input type="text" onfocus="clearDefault(this)" onblur="if(this.value=='')this.value='Name (required)';" value="Name (required)" name="author" id="author" size="22" tabindex="1" />
<input type="text" onfocus="clearDefault(this)" onblur="if(this.value=='')this.value='E-Mail (required, hidden)';" value="E-Mail (required, hidden)" name="email" id="email" size="22" tabindex="2" />
<input type="text" onfocus="clearDefault(this)" onblur="if(this.value=='')this.value='Website';" value="Website" name="url" id="url" size="22" tabindex="3" />
</div>

<?php endif; ?>

<div id="submit_spacer"><h6><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></h6></div>

<!-- Submit button -->
<h6><input name="submit" type="submit" value="Submit Comment" class="submit" /></h6>

<h6><?php comment_id_fields(); ?></h6>

<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>
enter code here
1

You can easily achieve the same effect with pure css by positioning your sidebar absolutely to the container div. Try this:

add:

#container {
   position:relative;
}

#sidebar {
   position:absolute;
   top:0;
   right:0;
   bottom:0;
}
19
  • +1. This is probably the best solution since he doesn't need #container to be anything other than position:relative;
    – skyuzo
    Sep 20, 2011 at 1:19
  • There is one problem with this... it cuts off content in the sidebar if the page or post content is shorter than the sidebar. Is there a way to dynamically resize an absolutely positioned div?
    – siouxfan45
    Sep 20, 2011 at 1:27
  • You're hiding the content that comes after with "overflow:hidden"..try this: remove the overflow:hidden from your container id and your sidebar id, introduce a clearfix and add a clearfix class to your container, i always use this one: yuiblog.com/blog/2010/09/27/… ... then go ahead try what i posted above, i just tested it out and it works fine. Sep 20, 2011 at 1:41
  • screeshot .. i removed almost all the content up to the image in your test post. Sep 20, 2011 at 1:50
  • This doesn't actually work, the absolute positioning of the sidebar expands past the footer and the color doesn't follow through. themeforward.com/demo2/2011/01/03/title-of-post
    – siouxfan45
    Sep 20, 2011 at 1:51
0

Make un function that set the height.
For example:

function setHeight(){
    $('#sidebar').height($('#post_content').outerHeight(true)+'px');
}

Call this function on page ready
and call it back again when you added content in #post_content.

1
  • You can also call that function within a resize() event handler. Then, you won't need to keep track of when its size changes.
    – skyuzo
    Sep 19, 2011 at 23:47
0

Have you tried using a clearfix element to do this for you instead? That way you don't have to dynamically track when the height changes. You need to use it in combination with a false background though.

On another note, shouldn't it be $(function() { }) or $(document).ready(function() { }) $().ready(function() { }) is not recommended.

2
  • I don't think a clearfix will help. He wants to have the sidebar resized to the full height of the container, not have the container resize to the full height of the floated children.
    – skyuzo
    Sep 19, 2011 at 23:52
  • I tried clearfix already, it doesn't. Thanks for the help though!
    – siouxfan45
    Sep 19, 2011 at 23:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.