web-dev-qa-db-fra.com

Pourquoi et comment vingt-treize ajoute-t-il un haut de marge à mon pied de page?

J'utilise le thème vingt-treize ans avec un thème enfant. J'ai essayé de résoudre le problème infâme de la barre latérale débordante de la manière suivante: - fait en sorte que le contenu flotte à gauche avec une largeur fixe - ait fait en sorte que la barre latérale flotte à droite avec une largeur fixe - j'ai ajouté une classe clearfix au div parent

Tout semble à peu près correct. MAIS, pour une raison quelconque, je trouve que le thème ajoute un haut de la marge à mon pied de page qui semble être égal à la différence entre le bas de la barre latérale (div à droite) et le bas du contenu de l'entrée (div à gauche), ainsi, la valeur de la marge supérieure dépend de la page affichée et est aléatoire (c'est-à-dire que ce n'est pas une valeur dans la feuille de style). Je pourrais résoudre ce problème en ajoutant un margin-top: 0 dans la feuille de style, mais j'aimerais vraiment comprendre ce qui le cause. Vous pouvez voir ce dont je parle ici: http://mywptestsite.is-great.org/page-height-and-sidebar/ / Il y a un haut de marge de 641px sur cette page!

<footer id="colophon" class="site-footer" role="contentinfo" style="margin-top: 641px;">

Savez-vous d'où ça vient? K.

Edit: voici mon CSS personnalisé:

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

.site-main #primary {
    float: left;
    clear: none;
    width: 620px;
}

.site-main #tertiary {
    float: right;
    clear: none;
}

.site-main .sidebar-container {
    position: static;
    width: 300px;
    height: auto;
} 

.site-main .widget-area {
    padding: 30px 20px 0 0;
}
sidebarfootertheme-twenty-thirteen
2
Kimberley Furson

Regardez dans le functions.js du thème parent. Cela ressemble à une implémentation du concept de "sticky footer". La marge est définie via un script:

var body    = $( 'body' ),
    _window = $( window );

/**
 * 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' );
    }
} );
4
helgatheviking