CSSコンテンツ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％を占めるようになりました。

レイアウトでサイドバーの固定幅が分かりません。これを修正する最良の方法は何ですか？

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のサイドバーは固定されます。 も

またそれが300ピクセル幅ではない320を有するbox-sizing:border-box#sidePanelを追加サイドバーの幅である主コンテンツにmargin-right:300pxを添加

（なぜなら左パディングと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のための幅を設定する必要があり、他の賢明その幅が解決しない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; 

を

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

から#itemListと

layout: fixed; 

から

はそれがお役に立てば幸いです。