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

希望它能幫助。