CSS右侧栏重叠浏览器调整大小的页面内容

Question

我知道这个问题已被问到很多次，但从我发现的所有解决方案来看，到目前为止，这些问题都没有。

我正在使用带有固定左侧边栏，单列行页面内容和固定右侧边栏的Bootstrap 3。左侧边栏按预期工作，但右侧边栏不符合页面的最小宽度设置，因此与页面内容重叠（screenshots inc）。

我想要它，以便页面的最小宽度为1024px，内容不应调整大小，如果浏览器小于1024px，右侧边栏不应与内容重叠。

我现在并不担心响应式设计，因为小屏幕设备会有不同的布局。

有人有解决方案吗？ 谢谢！

在浏览器调整大小之前＆gt; 1024px： 浏览器调整大小后＆lt; 1024px：

CSS代码：

html,
body {
  height: 100%;
  min-width: 1024px !important;
  width: auto !important;
  width: 1024px;
  /* The html and body elements cannot have any padding or margin. */
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -70px;
}
#wrapper {
  padding-left: 75px;
  padding-right: 350px;
  transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
  margin-left: -75px;
  left: 75px;
  width: 75px;
  background: #393839;
  position: fixed;
  height: 100%;
  overflow-y: hidden;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}
#page-content-wrapper {
  min-width: 970px;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  width: 75px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#whobar-wrapper {
  margin-right: -350px;
  right: 350px;
  width: 350px;
  background: #393839;
  position: fixed;
  height: 100%;
  overflow-y: hidden;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}
.whobar-nav {
  position: absolute;
  top: 0;
  width: 400px;
  list-style: none;
  margin: 0;
  padding: 0;
}

HTML代码：

<div id="wrapper">
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li>
        <a href="#" class="sidebar_sheet sidebar_sheet-profile" title="My Profile"></a>
      </li>
      <li>
        <a href="#" class="sidebar_sheet sidebar_sheet-contacts" title="Contacts"></a>
      </li>
      <li>
        <a href="#" class="sidebar_sheet sidebar_sheet-shortlist" title="Shortlist"></a>
      </li>
      <li>
        <a href="#" class="sidebar_sheet sidebar_sheet-explore" title="Explore"></a>
      </li>
    </ul>
  </div>
  <div id="whobar-wrapper">
    <!--    <ul class="whobar-nav">-->
    <!--        <li><a href="#" class="sidebar_sheet sidebar_sheet-profile" title="My Profile"></a></li>-->
    <!--        <li><a href="#" class="sidebar_sheet sidebar_sheet-contacts" title="Contacts"></a></li>-->
    <!--        <li><a href="#" class="sidebar_sheet sidebar_sheet-shortlist" title="Shortlist"></a></li>-->
    <!--        <li><a href="#" class="sidebar_sheet sidebar_sheet-explore" title="Explore"></a></li>-->
    <!--    </ul>-->
  </div>
  <div id="page-content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <h1>Temporary Dashboard Header</h1>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
            est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
            sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt
            quis, accumsan porttitor, facilisis luctus, metus</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我在你的css代码中找到的是固定宽度，实际上它在调整屏幕大小时不会弯曲。我对三列响应式设计的想法是尝试将px更改为流体列的％或尝试使用@media查询

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and（max-width：1024px）{
    .........
}