CSS内容div使用浮动侧边栏填充屏幕宽度

时间：2016-08-22 10:51:48

标签： html css css3

我有一个2列布局设置，其中左列是主要内容持有者，右列用作侧边栏。我希望侧边栏的大小是固定大小，并根据窗口大小调整主要内容：https://jsfiddle.net/n0y408m2/

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我想这样做，如果主要内容太长，滚动条将显示，侧边栏将固定并滚动页面，以便它始终保持在同一位置

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

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

4 个答案:

答案 0 :(得分：2)

由于您已将浮动权利添加到侧边小组，因此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

答案 1 :(得分：0)

我做了一个@media query所以在767px侧栏下变得固定。 还在主要内容中添加了margin-right:300px，这是侧边栏的宽度

还将box-sizing:border-box添加到#sidePanel，因此它的宽度为300px而不是320（因为10px的左右填充）

请参阅下面的代码段或小提琴＆gt; jsfiddle

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

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

#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;
}


@media only screen and (max-width: 767px) {
  #sidePanel { position:fixed;right:0}
  #itemList {margin-right:300px;}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你必须为两个div设置宽度，否则宽度不固定的div将占用100％的宽度 在样式表中添加以下属性

ts.forEachChild()

答案 3 :(得分：0)

如果我理解正确，你可以通过添加：

来完成它 
 height: 100vh;

到#itemList和

layout: fixed;

到#sidePanel: 

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

#itemList {
   margin-top: 10px;
   overflow: auto;
   background-color: green;
   height: 100vh;
}

希望它有所帮助。

相关问题
最新问题