0

Bootstrap を使用して、レスポンシブな典型的な OS X UI に似たレイアウトをまとめようとしています。

次のことを行う必要があります。

  • 全体の高さ 100%
  • 独自の背景色を持つ固定幅 (ただしレスポンシブ) 100% 高さのサイドバー
  • レスポンシブボディ（右列）

私はこのスレッドを見つけましたが、部分的に仕事をしています。問題は、サイド バーが 100% の高さではなく、フル ビューで幅が固定されていないことと、「レスポンシブ」の場合、右側が塗りつぶされずに下部に白い背景が残ることです。

いろいろいじってみたのですが、どうもうまくいきません。誰か提案があるか、これを行う方法を知っていますか?

ありがとうございました！

編集：

私の質問が不明確なので、明確にするために。これは、全体的に 100% 幅の流動的な右側の「本体」を備えた固定の左側のメニューになります。

4

1 に答える 1

2

これをチェックしてください。

<div class="row">
    <div class="span3" style="position:fixed;background-color:#46a546;height:100%;top:0px;" id="leftmargin">
        position fixed navbar (out of .container)
    </div>
</div>
<div class="container">
  <div class="row">
      <div class="span9 offset3" style="background-color:#049cdb;">
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
          bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
      </div>
  </div>
</div>

そして少しのjQuery

function sizing() {
    var windowwidth=$(window).width();
    var containerwidth=$('.container').width();
    if(windowwidth<1200) {
      var diff=windowwidth-containerwidth+40;
    }
    else {
      var diff=windowwidth-containerwidth+60; 
    }
    $('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
    if(windowwidth<=767) {
      $('#leftmargin').css('margin-left', '0px');
      $('#leftmargin').css('position', 'relative');  
    }
    else {
      $('#leftmargin').css('position', 'fixed');        
        if(diff>0) {
            $('#leftmargin').css('margin-left', (diff/2) +'px');
        } else {
            $('#leftmargin').css('margin-left', '20px');
        }
    }
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/NzqfL/3/

私の以前の投稿に触発されたhttps://stackoverflow.com/a/10972425/1416911

于 2012-06-20T07:45:27.560 に答える