0

残りのスパン (コンテンツ スパン) が垂直にスクロールするように、固定ナビゲーション バーと固定サイドバーを持つ Bootstrap レイアウトを作成しました。ただし、ウィンドウ ヘッダーとウィンドウを実際に包含するコンテンツ スパンが必要です。ウィンドウ ヘッダーは静的ですが、ウィンドウのコンテンツはウィンドウ内でスクロールします。

.sidebar-nav-fixed {
  padding: 9px 0;
  position: fixed;
  left: 20px;
  top: 78px;
  width: 250px;
}

.row-fluid > .span-fixed-sidebar {
  margin-left: 290px;
}

.main {
  margin-top: 80px;
}

.header {
  margin-top: 80px;
}

.threadwindow {
  height:  100%;
  overflow: auto;
  border: 1px solid #333;
}

現在のコードをここに投稿しましたhttp://jsfiddle.net/timburgess/CUGu8/

提案をいただければ幸いです。固定位置のウィンドウ ヘッダーを試してみましたが、ウィンドウのコンテンツがスクロールするだけです :-( これは私が望んでいるものではありません。

4

1 に答える 1

1

私はこれを解決しましたが、コアCSSは基本的に次のとおりです。

#main {
  position: absolute;
  left: 300px;
  top: 100px;
  right:  0;
  bottom: 0;
  border: 2px solid #333;
}


.threadwindow {
  position: absolute;
  left: 0;
  top: 50px;
  right: 0;  
  bottom: 0;
  border: 1px solid #333;
  overflow-y: auto;
}

完全な結果は次のとおりです。

http://jsfiddle.net/timburgess/ZTt5M/

わかりやすくするために、メイン ウィンドウを強調するために境界線で囲み、サブウィンドウのコンテンツの上にヘッダーを表示できるようにするサブウィンドウ (再び境界線を使用) を埋め込みます。サブウィンドウのコンテンツは、使用可能なスペースを超えると垂直方向にスクロールし、絶対配置を使用することで、メイン ウィンドウの右と下の境界がブラウザーの端に固定されます。

于 2012-12-05T10:28:52.387 に答える