内容<section>没有留在原地

Question

我的部分是由容器，左侧菜单，右侧菜单和容器构建的，我遇到了这个问题：

#container {
  margin: 40px auto;
  width: 70%;
  min-height: 400px;
}

#leftmenu {
  float: left;
  box-sizing: border-box;
  width: 20%;
  min-height: 600px;
  background-color: #111;
}

#content {
  float: left;
  box-sizing: border-box;
  width: 60%;
  background-color: #202020;
  min-height: 600px;
}

#rightmenu {
  float: left;
  box-sizing: border-box;
  width: 20%;
  min-height: 600px;
  background-color: #272727;
}

当我缩小窗口时，问题就会出现：

内容框显示在右侧菜单的右侧（看起来如下），并且不会与其他菜单缩小。这是如何解决的？

HTML：

<section id="container">
    <section id="leftmenu">
      <section class="contenthead">
        <b style="font-weight: bold; color: #976535; text-align: center;"><center>HOVEDMENY</center></b>
      </section>

    </section>


    <section id="content">
      <section class="contenthead">&raquo; <? echo $page; ?></section>


    </section>

    <section id="rightmenu">
      <section class="contenthead">
        <b style="font-weight: bold; color: #976535; text-align: center;"><center>KOMMUNIKASJON</center></b>
    </section>


  </section>
</section>

</body>
</html>

问题的屏幕截图：

帮助，有人吗？！？

Answer 1

我建议您在桌面模式下使用固定侧边栏和流畅内容。这样的事情可能是你的开始...

.main-content {border: 1px solid #999; padding: 5px; position: relative; min-height: 200px; padding-left: 125px;}
.left-sidebar {position: absolute; left: 0; top: 0px; width: 120px; background-color: #eee; height: 100%;}

<div class="main-content">
  <div class="left-sidebar"></div>
  <div class="right-fluid">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum libero iure facere quam iste, nostrum laborum in, dolorum beatae optio rem explicabo voluptates qui quos eius accusamus! Accusamus blanditiis, et!
  </div>
</div>

尝试全屏调整窗口大小并检查它。

<强>更新

使用相同的代码，它看起来像这样：

#container {
  margin: 40px auto;
  min-height: 400px;
  position: relative;
  padding: 0 200px;
}

#leftmenu {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  box-sizing: border-box;
  min-height: 600px;
  background-color: #111;
  text-align: center;
}

#content {
  box-sizing: border-box;
  background-color: #202020;
  min-height: 600px;
  color: #fff;
}

#rightmenu {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 200px;
  min-height: 600px;
  background-color: #272727;
}

<section id="container">
  <section id="leftmenu">
    <section class="contenthead">
      <b style="font-weight: bold; color: #976535;">HOVEDMENY</b>
    </section>
  </section>

  <section id="content">
    <section class="contenthead">&raquo; Page</section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, illo. Nulla saepe quasi sint nam, beatae adipisci labore mollitia. Minima assumenda corporis perspiciatis veritatis aut distinctio eligendi! Quam, deleniti, eveniet.</p>
  </section>

  <section id="rightmenu">
    <section class="contenthead">
      <b style="font-weight: bold; color: #976535; text-align: center;"><center>KOMMUNIKASJON</center></b>
    </section>
  </section>
</section>