该代码可在一个网站上运行，但是在其他网站上则会溢出

Question

正如您在此链接上看到的那样，当滚动到底部时，边栏溢出到页脚。

https://www.sac-ekimi.deniz-tasarim.site/2019/07/06/kadinlarda-sac-ekimi/

但它在此网站上有效

https://www.deneme.deniz-tasarim.site/2019/06/28/prp/

代码：

 <div class="col-lg-2" >
   <nav class="navbar navbar-expand-md navbar-light  position-fixed shadow p-3 mb-5 bg-white rounded  " style="background-color:#F3F3F3;  overflow: hidden; margin-top:50px;  " role="navigation">
         <?php get_sidebar(); ?>
        </nav>
     </div>

我还想知道为什么在将margin样式添加到导航时为什么margin-bottom不起作用？

我添加了第一个链接的所有代码

    <?php get_header(); ?>



            <style>
             .breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;

}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}



             </style>
<?php
    /**
 * Generate breadcrumbs
 * @author CodexWorld
 * @authorURL www.codexworld.com
 */
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}
   ?>
             <div class="breadcrumb"><?php get_breadcrumb(); ?>

<div style="margin-left: auto;">By <?php the_author_posts_link(); ?> on <?php the_time('F jS, Y'); ?>  in <?php the_category(', '); ?> <?php edit_post_link(__('{Edit}'), ''); ?></div>

</div>


<main role="main">

<section class="container">



    <div class="row " >

     <div class="col-lg-10 ">



         <div class="row">

         <div class="col-lg-12 ">    


             <?php if (have_posts()): while (have_posts()) : the_post(); ?>



        <!-- article -->

        <article id="post-<?php the_ID(); ?> <?php post_class();"" ?>



            <!-- post thumbnail -->



            <!-- /post thumbnail -->



          <?php the_content(); // Dynamic Content

            ?>



            </div>


            <!-- /post title -->



            <?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>



            <?php edit_post_link(); // Always handy to have Edit Post Links available ?>



             <!-- profile card -->


             <style>

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";


.badgescard,

.firstinfo {

    display: flex;

    justify-content: center;

    align-items: center;

}


html {

    height: 100%;

}



*,

*:before,

*:after {

    box-sizing: border-box;

}


.contentz {

    position: relative;

    animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;


}


.card {

    width: %8;

    min-height: 100px;

    padding: 2px;

    border-radius: 3px;

    background-color: white;

    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    position: relative;

    overflow: hidden;

}



.card:after {

    content: '';

    display: block;

    width: %8;

    height: 300px;

    background: cadetblue;

    position: absolute;

    animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;

}



.badgescard {

    padding: 1px 2px;

    border-radius: 3px;

    background-color: #00bcd4;

    color:#fff;

    width: %8;

    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

    margin-left: 1px;

    z-index: -1;

    left: 1px;

    bottom: 10px;



    animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;

}



.badgescard span {

    font-size: 1.6em;

    margin: 0px 6px;

    opacity: 0.6;

}



.firstinfo {

    flex-direction: row;

    z-index: 2;

    position: relative;

}



.firstinfo img {

    border-radius: 50%;

    width: %100;

    height: 120px;

}



.firstinfo .profileinfo {

    padding: 0px 20px;

}



.firstinfo .profileinfo h1 {

    font-size: 1.8em;

}



.firstinfo .profileinfo h3 {

    font-size: 1.2em;

    color: #00bcd4;

    font-style: italic;

}



.firstinfo .profileinfo p.bio {

    padding: 10px 0px;

    color: #5A5A5A;

    line-height: 1.2;

    font-style: initial;

}



@keyframes animatop {

    0% {

        opacity: 0;

        bottom: -500px;

    }

    100% {

        opacity: 1;

        bottom: 0px;

    }

}



@keyframes animainfos {

    0% {

        bottom: 10px;

    }

    100% {

        bottom: -42px;

    }

}



@keyframes rotatemagic {

    0% {

        opacity: 0;

        transform: rotate(0deg);

        top: -24px;

        left: -253px;

    }

    100% {

        transform: rotate(-30deg);

        top: -24px;

        left: -78px;

    }

}

</style>


             <?php if ( function_exists('journalite_author_bio') ) {journalite_author_bio();}?>



               <!-- /profile card -->

             <?php comments_template(); ?>

        </article>

        <!-- /article -->

    <?php endwhile; ?>



    <?php else: ?>



        <!-- article -->

        <article>



            <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>



        </article>

        <!-- /article -->



    <?php endif; ?>



    </div>



    </div>



     <div class="col-lg-2" >



       <nav class="navbar navbar-expand-md navbar-light  position-fixed shadow p-3 mb-5 bg-white rounded  " style="background-color:#F3F3F3;  overflow: hidden; margin-top:50px;  " role="navigation">



             <?php get_sidebar(); ?>


            </nav>

         </div>


 </div>



    </div>

</section>

</main>

<?php get_footer(); ?>