2017-12-13 6 views
0

ページコンテンツが流れるブラウザの両側に静的なストライプを作成しようとしています。私はブートストラップを使用しています。私は、静的コンテンツのために、左側に1つのセルを、右側に1つのセルを確保しました。これらのセルには、ページ全体に沿って、コンテナセルの幅の50%の幅があります。次のように設定のサイドバーが合わない

私のコードは次のとおりです。 Page layout

左側がOKである:

<div class="col-lg-1 col-md-1 col-sm-1"> 
     <div style="background-image: url(./Content/images/strip_left.jpg); background-repeat: repeat-y; width: 20%; float: left; min-height:100%; position:fixed; top:0px; bottom:0px;">&nbsp;</div> 
    </div> 
<div class="col-lg-4 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-2 col-sm-offset-1"> 
    <!-- This is where the page content flows --> 
</div> 
<div class="col-lg-1 col-md-1 col-sm-1" style="float:right; margin:0px; right:0px; text-align:right;"> 
     <div style="background-image: url(./Content/images/strip_right.jpg); background-repeat: repeat-y; width: 20%; float: right; min-height:100%; position:fixed; top:0px; bottom:0px;">&nbsp;</div> 
</div> 

問題は、私は次のようになっていますということです。しかし、私は右のギャップを埋めることができませんでした。浮動小数点、マージン、パディングが機能しませんでした。この問題を解決するにはどうすればよいですか?

P.S. :緑色の領域は左端と右端のdivです。黄色の領域がコンテンツ領域です。白い領域はここに私はストライプとして背景イメージを設定します。

+0

浮動小数点/整列のインラインCSSの代わりにプル右およびプルレストのブートストラップクラスを使用することを検討してください – jcruz

答えて

0

フロートと固定の両方の位置を使用している問題が発生していると思います。 https://jsfiddle.net/ro5hvwub/2

が、これはあなたが探しているものです:

position: fixed; /* use this only if you want the element fixed positioned in relation to the window */ 

ここでは単純化されたフィドルですか?

関連する問題