Question

我正在使用display:flex以使页面上的内容居中/垂直居中。我设置了一个媒体查询，以便有一个移动大小的汉堡菜单。但是，homePage似乎有一个合适的边距。无论我尝试什么，我都无法获得保证金。这是一个jsfiddle。请帮忙！

http://jsfiddle.net/crcommons/Lxepj9ko/2/ （请确保您调整浏览器大小以便移动）。

$('.hamburger').on('click', function() {
    $('.menu').slideToggle();
});

function setPageHeight () {
	var windowHeight = $(window).height();
	var headerHeight = $('header').height();
	pageHeight = (windowHeight - headerHeight);
	$('.homePage').css('min-height', pageHeight + 'px');
};

setPageHeight();

$(window).resize(setPageHeight);

*, *:after, *:before {
    box-sizing: border-box
}
body {
    font-size: 18px;
}
.container {
    margin: 0 auto;
}
nav {
    background-color: white;
    max-width: 100%;
    padding-top: .75em;
}
.mainNav {
    max-width: 1024px;
    margin: 0 auto;
}
.mainNav li {
    width: 19%;
    display: inline-block;
    border-right: 1px solid black;
    text-align: center;
}
.mainNav li:last-child {
    border-right: none;
}
.hamburger {
    display: none;
    line-height: .3em;
}
.hamburger:before {
    content: "≡";
}
.homePage {
    background-color: #CBD5D2;
    max-width: 100%;
    display: flex;
}
.introduction {
    max-width: 40em;
    margin: auto;
}

.logo {
    text-align: center;
}
.tagline {
    font-size: 3em;
    text-align: center;
}
.introduction p {
    text-align: justify;
}

@media screen and (max-width: 479px) {
    .wrapper {
        padding: 1.5em;
    }
    nav {
        display: none;
    }
    .hamburger {
        display: inline-block;
        font-size: 3.5em;
        text-decoration: none;
        float: right;
    }
    .navigation {
        float: left;
        float: left;
        position: absolute;
        right: 0;
        margin-top: 30px;
        padding: 0;
        background: gray;
    }
    .mainNav {
        padding: 0;
    }
    .mainNav li {
        display: block;
        padding: .5em;
        width: 100%;
    }
    .homePage {
        padding: 1em;
    }
    .tagline {
        font-size: 2em;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
        <header>
            <div>
                <a href="#" class="hamburger"></a>
            </div>
            <nav class="navigation menu">
                <ul class="mainNav">
                    <li>Home</li>
                    <li>Page 1</li>
                    <li>Page 2</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
        <div class="homePage">
      
            <div class="introduction">
                <h1 class="logo">Title</h1>
                <h2 class="tagline">Lorem ipsum dolor sit.</h2>
                <p class="introP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nam velit, voluptates dolore consequuntur ea tempore laborum mollitia, corporis impedit distinctio aperiam itaque perspiciatis repellat neque facilis esse molestiae maiores eum, incidunt eius quaerat! Dicta illo ut, incidunt ratione magni cum unde architecto obcaecati illum harum tempora veniam placeat voluptatem.</p>
            </div>
            </div>
    </body>

Answer 1

解决此问题的一个选项是.hamburger类媒体查询设置position: absolute; right: 0px;

Answer 2

这种情况正在发生，因为.hamburger向右浮动，没有什么可以清除浮动。 .homepage有一个max-width: 100%，但未设置宽度。由于主页不是100％，它会漂浮在汉堡包周围。

清除浮动：

header::after {
    content: '';
    display: block;
    clear: both;
}

将主页宽度设置为100％：

.homepage {
    background-color: #CBD5D2;
    max-width: 100%;
    width: 100%;
    display: flex;
}

Flex创造了不会消失的利润

2 个答案: