Question

这里存在偏斜问题。这是我的标记：

    <div class="skew skew_outer">
    <header id="masthead" class="site-header" role="banner">
        <div class="skew skew_1">
            <div class="skew skew_2">
                <div class="skew skew_3">
                    <div class="headerwrap">
                        <div class="site-branding">
                            <?php dynamic_sidebar( 'header-logo' ); ?>
                        </div><!-- .site-branding -->

                        <nav id="site-navigation" class="main-navigation" role="navigation">
                            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'full-width-skeleton-theme' ); ?></button>
                            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
                        </nav><!-- #site-navigation -->
                    </div> <!-- End Header Wrapper --> 
                </div> <!-- End Skew Three --> 
            </div> <!-- End Skew Two -->
        </div> <!-- End Skew One -->

    </header><!-- #masthead -->
</div> <!-- End Outer Skew -->

这是我的造型（SCSS）：

.site-header{
background: #c2c2c2;
transform: skew(0deg, -6deg);
height: 301px;
.skew_3{
    background: rgb(255,255,255);
    transform: skew(0deg, 1deg);

}
.skew_2{
    background:$med_blue;
    transform: skew(0deg, 1deg);
    height: 240px;
}
.skew_1{
    background:$light_blue;
    transform: skew(0deg, -2deg);
    height: 280px;
}

.headerwrap{
    background: transparent;
    transform: skew(0deg, 6deg);
    padding: .5rem 0 0;
    @include main-wrapper;

    &:after {
        content: "";
        display: table;
        clear: both;
    }
  }
}

由于某些原因，此代码导致页面的高度扩展得太高。我尝试在header和skew_n类中应用了一些overflow：hidden，但是这显然只是关闭了倾斜的边框并使元素再次成为矩形。

有谁知道为什么会这样？提前谢谢。

Answer 1

想出来的人。如果您正在使用Underscores启动主题（或者您的菜单工作的任何主题，就像我要说的那样），并且您在页面标题上有负面偏差（极少数情况下，对吗？），需要改变菜单的工作方式。

默认情况下，它使用绝对定位将页面左侧的子菜单发送到页面的左侧，由于标题的倾斜，导致它真正向下和向左，从而使页面更高（因为现在它已经在页面上了。）

歪斜导致页面高度拉得很高

1 个答案: