html - CSS content div 用 float 侧边栏填充屏幕宽度

Question

我有一个 2 列布局集，其中左列是主要内容容器，右列用作侧边栏。我希望侧边栏以像素为单位固定大小，主要内容根据窗口大小进行调整:https://jsfiddle.net/n0y408m2/

#itemList {
  margin-top: 10px;
  overflow: hidden;
  background-color: green;
}

#sidePanel {
  background-color: red;
  float: right;
  width: 300px;
  padding-left: 10px;
  padding-right: 10px;
}

#buttonContainer {
  width: 100%;
  padding-top: 20px;
}

#buttonContainer button {
  display: block;
  width: 70%;
  margin: 0 auto 20px;
}

#infoContainer {
  background-color: #d3e2eb;
  width: 90%;
  margin: 0 auto;
  border: 1px solid black;
  border-radius: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="sidePanel">
  <div id="buttonContainer">
    <button type="button" class="btn btn-success btn-md">Add Item</button>
    <button type="button" class="btn btn-danger btn-md" disabled>Delete Item</button>
    <button type="button" class="btn btn-primary btn-md" disabled>Edit Item</button>
  </div>
  <div id="infoContainer">
    <h4 class="text-center">Information</h4>
  </div>
</div>

<div id="itemList">
  <h3>Main content</h3>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

我想做的是如果主要内容太长，滚动条会显示，侧边栏会固定并随页面滚动，所以它总是停留在同一个位置

我可以通过设置 position:fixed; 来实现。 right:0 在侧边栏上。但是现在主要内容填充了 100% 的屏幕宽度，而它仍然应该与侧边栏的左边缘齐平

我想布局现在不再知道边栏的固定 px 宽度。解决此问题的最佳方法是什么？

Answer 1

由于您已经在侧面板右侧添加了 float ，因此提供 margin-right 将解决您的问题。

这对你有用 demo

    #itemList {
      margin-top: 10px;
      overflow: hidden;
      background-color: green;
      margin-right: 315px;
    }

    #sidePanel {
      background-color: red;
      float: right;
      width: 300px;
      padding-left: 10px;
      padding-right: 10px;
      position: fixed;
      right: 0;
    }

    #buttonContainer {
      width: 100%;
      padding-top: 20px;
    }

    #buttonContainer button {
      display: block;
      width: 70%;
      margin: 0 auto 20px;
    }

    #infoContainer {
      background-color: #d3e2eb;
      width: 90%;
      margin: 0 auto;
      border: 1px solid black;
      border-radius: 5px;
    }


  [1]: https://jsfid