-2

ウィンドウの左側にバーを設定し、幅を設定して、ウィンドウの右側を埋める別の div を実装しようとしています。「float:left;」を使ってみました 両方にありますが、これにより「右側」の領域が左側のバーの下に積み上げられます。

正しい

これは正しいですが、右側の白い領域を他の div で埋める必要があることを除きます。私の現在の試みでは、これが起こります：

問題

一番下のdivで右側の白い領域を埋めるにはどうすればよいですか? 黒のグラデーションは background: 設定であり、適切にスケーリングされます。

ありがとう！

4

3 に答える 3

1

私はすでにこれを行う方法を考え出しました...方法を知る必要がある他の人のために：

左のバーの場合、既知の幅を設定する必要があります。この場合、 %width% を幅に置き換えます...

CSS:

.leftBar{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    color:white;
    height: 100%;
    width: %width%;
}
.mainCenterContent{
padding-left:%width%;
width:100%;
height:100%;
}

HTML:

<div class="leftBar">
bleh
</div>
<div class="mainCenterContent">
    bleh
</div>

ご覧のとおり、パディングは本質的に、左側のバーと交差しないように十分に div を移動します。これは私にとって適切に機能しています。

ありがとう！

于 2013-01-16T01:35:56.057 に答える
0

持ってみてください

clear:both;

2 つのコンポーネントの後。

これを参照してください:サイドバー

于 2013-01-16T01:36:17.510 に答える
0

別の方法を次に示します。

<style>
body, html {
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}
div#left_nav {
  position:relative;
  width:250px;
  float:left;
  background-color:#58A;
  height:100%;
}
div#page_content {
  position:static;
  background-color:#CDF;
  height:100%;
}


<body>
  <div id="left_nav">left menu</div>
  <div id="page_content">page content</div>
</body>

2 列のレイアウトを作成するには、さまざまな方法があります。いくつかは他よりも複雑です。設計が複雑になればなるほど、レイアウトがより堅牢になる必要があることがわかりました。周りを検索すると、ニーズに最適なものが見つかります。

于 2013-01-16T01:48:44.980 に答える