CSS content div使用浮动边栏填充屏幕宽度

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

正如你已经广告代德浮动到您的侧面板，给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 

Answer 2

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

还添加box-sizing:border-box到#sidePanel因此它具有300像素的宽度不320

（因为左填充和10px的右侧的）

看到下面的代码片段或小提琴>jsfiddle

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

<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>

Answer 3

你必须设置宽度为其他两个div的

工作明智的，其宽度不固定的股利将占据100％的宽 添加以下样式表中的

性质

#itemList { 
    width: calc(100% - 310px); 
} 
#sidePanel { 
    background-color: #ff0000; 
    float: right; 
    padding-left: 10px; 
    padding-right: 10px; 
    position: fixed; 
    right: 0; 
    width: 300px; 
} 

Answer 4

如果我理解正确的话，你可以把它加入完成：

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

希望它能帮助。