Question

您好，我正在为我的乐队设计自己的自定义构建模板。一切顺利，直到注意到我的旁边不会漂浮在我的youtube播放器旁边，我的页脚粘在我的标题上（忽略包装）。我花了整整一个下午试图调试这个，但没有结果。我想我可能忽视了一些愚蠢的事情。

css

/* html element 62.5% font-size for REM use */
html {
    font-size:62.5%;
}
body {
    font-family: 'Oswald', sans-serif;
    color: white;


}
p {
    font-size: 1.6em;
    font-weight: 300;
    text-align: justify;

}
h1 {
        background-color: #111111;
        line-height: 1.4em;
        font-size: 2em;
        padding: 0;
        padding-left: 1.5%;
        margin: 0;
        font-weight: 300;
        text-transform: uppercase;
        color: white;
}
h2{
    font-size: 2em;
    font-weight: 400;
}
h2 a { 
    color: white;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
    max-width:100%;
    vertical-align:bottom;
}
a {
    color:#444;
    text-decoration:none;
}
a:hover {
    color:black;
}
a:focus {
    outline:0;
}
a:hover,
a:active {
    outline:0;
}
input:focus {
    outline:0;
    border:1px solid #04A4CC;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {

    width:100%;
    margin:0 auto;
    padding-left: 10%;
    padding-right: 10%;

}
/* header */
.header {
    background-color: #111111;
    width: 100%;
    height: 375px;

    overflow: hidden;

}
#headerwrap {
    height: 375px;
    padding-left: 10%;
    padding-right: 10%;

}
#parallax0 {
        background-image-size: 375px 800px;
    background: url(img/para01.png) 50% 0 repeat-y fixed; 
    border-spacing: 0;


}
#parallax1{
    background: url(img/para02.png) 50% 0 repeat-y fixed; 
    background-image-size: 375px 800px;
}
#parallax2{
    background: url(img/para03.png) 50% 0 repeat-y fixed; 
    background-image-size: 375px 800px;

}
#parablock {
    height: 375px;
    width: 500px;
    background-color:red;

}

nav ul
{
    z-index: 500;
float:right;
width:100%;
padding:0;
margin:0;
margin-top: 10px;
list-style-type:none;
display: block;
position: relative;
}
nav a
{
float:right;
width:10%;

text-decoration:none;
text-align: center;
color:white;
font-size: 1.5em;
text-transform: uppercase;
    border: solid 1px;
    border-color: transparent;

}
nav a:hover {


    color: white;   
    border: solid 1px;
    border-color: white;
}
nav li {

}

/* logo */
.logo {

    width: 435px;
    height: 375px;
        position: relative;
        margin: 0;
    background-image: url("img/logo.png");
}
.logo-img {
    display: none;
}
.slogan {
    width: 705px;
    overflow: hidden;
    position: relative;
    bottom: 180px;
    left: 35%;
}
.slogan h1 {
    padding-left: 5px;
    padding-right: 5px;
    font-weight: 400;
    position: relative;
    display: block;
        font-size: 4em;
    height: 100%;
    width: 100%;
        background-color: transparent;
    letter-spacing: -1.5px;
    text-transform: none;

}
.slogan h1 span {
    color: #316b00;
    background-color: #111111;
    font-weight: 300;
    padding-right: 5px;
    padding-left: 5px;
}
.slogan h1  .at {
    color: white;
    font-weight: 400;
}
/* nav */
.nav {


}
/* sidebar */
.sidebar {
        width: 31.5%;
        float: right;
        background-color:  #316b00;
}
/* footer */
.footer {
    background-color: #111111;
    height: 100px;
    padding-top: 50px;

}
.post {

    width: 64.5%;
    background-color: #6b0021;
    float: left;
    margin-bottom: 2.5%;
}
.post01 {
    padding-left: 3%;
    padding-right: 3%;
    margin-bottom: 3%;
    width: 50%;
    float: left;

}
.youtubeplayer {

}

html 头

<body <?php body_class(); ?>>

    <!-- wrapper -->


        <!-- header -->

        <header class="header" role="banner">
        <section id="parallax0" data-speed="0.7" data-type="background">
        <section id="parallax1" data-speed="0.8" data-type="background">
        <section id="parallax2" data-speed="0.9" data-type="background">

            <div id="headerwrap">
                    <nav class="nav" role="navigation">
                        <?php html5blank_nav(); ?>
                    </nav>
                    <!-- logo -->
                    <div class="logo">
                        <a href="<?php echo home_url(); ?>">
                            <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
                            <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
                        </a>
                    </div>
                    <div class="slogan">
                        <h1> "Een uptempo band met een heel hoog<br> aaibaarheidsgehalte <span>en toch ook vette rock 'n roll.</span><span class="at">"</span></h1>
                    </div>
            </div>
                <!-- /logo -->

                <!-- nav -->

                <!-- /nav -->

        </section>
        </section>
        </section>
        </header>
<div class="wrapper">



        <!-- /header -->

索引

<?php get_header(); ?>

    <section class="youtubeplayer post">
    <h1>Video</h1>
        <iframe width="100%" height="400" src="//www.youtube.com/embed/Iv2SXP5VwAk?rel=0" frameborder="0" allowfullscreen></iframe>
    </section>
    <!-- section -->
    <section class="post" role="main">

        <h1><?php _e( 'Latest Posts', 'html5blank' ); ?></h1>

        <?php get_template_part('loop'); ?>

        <?php get_template_part('pagination'); ?>

    </section>
    <!-- /section -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

边栏

<!-- sidebar -->
<aside class="sidebar" role="complementary">

    <?php get_template_part('searchform'); ?>

    <div class="sidebar-widget">
        <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-1')) ?>
    </div>

    <div class="sidebar-widget">
        <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-2')) ?>
    </div>

</aside>
<!-- /sidebar -->

页脚

        <!-- footer -->
            </div>
        <footer class="footer" role="contentinfo">

            <!-- copyright -->
            <p class="copyright">
                &copy; <?php echo date("Y"); ?> Copyright <?php bloginfo('name'); ?>.  

            </p>
            <!-- /copyright -->

        </footer>
        <!-- /footer -->


    <!-- /wrapper -->

    <?php wp_footer(); ?>

    <!-- analytics -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXXXXX-XX'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)})(document,'script');
    </script>

</body>

Answer 1

没有实际内容（如<p>）导致包装器没有高度，没有高度=不存在。内容将显示，但任何后续元素将忽略它的尺寸，打破布局。要使其他元素符合尺寸，您必须使用height: 300px;设置手动高度，或使其溢出overflow: auto;

.wrapper {
   width:100%;
   margin:0 auto;
   padding-left: 10%;
   padding-right: 10%;
   overflow:auto;
}

要修复此YouTube页面上的位置，请更改包含的顺序：在<?php get_sidebar(); ?>之后而不是在<?php get_header(); ?>之前设置get_footer();。

页脚连接到标题wordpress

1 个答案: