媒体查询内容适应

Question

我无法正确处理#main-wrapper

的@media only screen and (min-width: 1400px)行为

我想要的是#main-wrapper的分辨率宽度为100％＆lt; 1400px，而＆gt; 1400的宽度设置为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

因为＆lt; 1400px中的#menu-section具有position: fixed;属性，在这种情况下可以，但是当宽度＆gt; 1400px，然后出现此问题。删除position: fixed;并对其进行测试。

Answer 2

问题是您的侧边栏元素position:fixed。

您需要添加相对于main-wrapper的位置，并在menu-section

中将位置从固定更改为绝对

#main-wrapper {
  position: relative
}
#menu-section {
  position: absolute; //instead of fixed
}