Question

我在主要内容的左侧有一个带侧边菜单的网站。一切都好，直到窗口的分辨率变得足够低。在较低分辨率的侧边栏上翻阅主要内容。我想在他们之间总是有空间。我怎么能实现这个目标呢？

这是jsfiddle：http://blog.bananacoding.com/blog/first-impressions-of-aspnet-and-visual-studio-code-on-osx

我的css代码：

header{
  background-color: red;
  width: 100%;
  height: 100px;
}
.fixedTop {
    top: 0;
    margin: 0 !important;
    left: 18px;
    top: 50px;
}
nav{
    position: fixed;
    float:left;
    height: 100px;
    width: 100px;
    margin-left: 10px;
    margin-right: 50px;
    margin-top:50px;
    background-color: green;  
}
main{
   background-color: blue;
   height: 1500px;
   margin-left:15%;
   margin-right:5%;
   margin-top:50px;
}

Answer 1

您应该为低分辨率屏幕提供解决方案，但是您可以通过将其添加到CSS来修复它：

JS Fiddle

body{
    min-width:750px;
}

因此，在低于750px的分辨率下，将出现水平滚动条，并且yoru侧边栏永远不会覆盖内容

Answer 2

主要有剩余边距为15％而不是主要边距为160px

主要内容在较低分辨率的侧边菜单下

2 个答案: