二十三和侧边栏溢出页脚 - 顶部边距

时间:2014-09-09 16:55:37

标签: javascript css wordpress sidebar

我一直试图阻止侧边栏在Wordpress 4.0中的二十三个子主题中溢出页脚。

我在另一个网站的其他帖子中添加了以下CSS代码。

CSS:

/* Fix Sidebar Overlaping Footer*/

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
   padding: 0px 20px 0px 20px;
   max-width: 100%;
}

.sidebar .site-footer .widget-area {
    max-width: 1040px;
    left: 0px;
    margin-top:10px!important;
}

.hentry {
   padding: 20px 0px;
}

@media (min-width: 999px) {

   #main {
      overflow: hidden;
      margin: 0px auto;
      max-width: 1080px;
   } 

   #primary.content-area {
      width: 68%;
      float: left;
   }

   .site-main .sidebar-container {
      position: static;
      float: right;
      width: 30%;
      height: auto;
   }
   .site-main .widget-area {
      margin-top: 24px;
      margin-right: 20px;
   }

}

问题是javascript(在secondlytheen / js中的functions.js)为页脚添加了一个巨大的上边距,你可以看到这里的结果:http://tcsdesignreno.com/addnv/

使用Javascript:

/**
     * Adds a top margin to the footer if the sidebar widget area is higher
     * than the rest of the page, to help the footer always visually clear
     * the sidebar.
     */
    $( function() {
        if ( body.is( '.sidebar' ) ) {
            var sidebar   = $( '#secondary .widget-area' ),
                secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
                margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;

            if ( margin > 0 && _window.innerWidth() > 999 ) {
                $( '#colophon' ).css( 'margin-top', margin + 'px' );
            }
        }
    } );

有没有人有一个解决方案可以阻止侧边栏重叠页脚或阻止js添加上边距?我知道我以前做过这个,但我似乎无法找到正确的代码组合。

提前致谢,

马特

1 个答案:

答案 0 :(得分:1)

嗯,实质上你回答了我的问题。

.js中为边距顶部创建css的行具有ID #colophon

我将这一行添加到我的子主题css中,它处理了margin-top:

  

#colophon {margin-top:0!important;}