css - 媒体查询内容适配

Question

我无法正确处理我的 #main-wrapper 行为 @media only screen and (min-width: 1400px)

我想要得到的是 #main-wrapper 的分辨率 <1400px 和 >1400 的宽度为 100%，其宽度设置为 1336px

现在 #menu-section 溢出 #content-section

实例: http://solutionsmvo.nazwa.pl/nell-ogrody/o-nas/

代码:

#main-wrapper {
    width: 100%;
    overflow:hidden;
}

#menu-section {
    width: 25%;
    float: left;
    height:100vh;
    position: fixed;
}

#content-section {
    width: 75%;
    float:right;
    min-height: 100vh;
}

@media only screen and (min-width: 1400px) {
    #main-wrapper {width: 1336px; margin: 0 auto;}
}

<div id="main-wrapper">
    <div id="menu-section">
    </div>  

    <div id="content-section">
    </div>
</div>

Answer 1

因为你的 #menu-section 在 <1400px 有 position: fixed; 属性，在这种情况下没问题，但是当 width > 1400px 时，就会出现这个问题。删除 position: fixed; 并测试它。