0

この問題が発生しました。divをdiv内に配置し、「タイトル」を高さ50に配置し、次に「ナビゲーションバー」をその下に配置したので、高さを100％に設定しました。 、div内にとどまらず、実際にdivから離れたり、divから外れたりして、スクロールバーが表示されます。

私は「サイト」が壁を食いつぶし、他のすべてのdivがそのdivに収まるようにしたいと思います。

    <div id="site">
        <div id="title">TitleBar</div>
        <div id="navbar">NavBar</div>
        <div id="frame">FrameBar</div>
    </div>
body{
    margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}

似たような画像を見つけました。 http://img176.imageshack.us/img176/4637/picture1zb1.png

4

3 に答える 3

0

cssにfloatプロパティを追加することで、HTMLの分割を並べて表示できます。

#navbar{
    border: 1px solid #c38a8a;
    width: 200px;
    height: 100%;
    float: left;
}

さらに、サイズの後に常に「px」単位を追加してください。最近のブラウザはあなたがpxを意味すると想定していますが、古いブラウザはそうではないかもしれません。

設定されたピクセル幅のサイドバーがある場合、オーバーラップを防ぐ良い方法はありません。液体の幅（または液体の幅）のスタイルを実現するには、左側の#frameに負の200pxのマージンを追加する必要があります（サイドバーに対抗するため）。次に、＃frame内に別のディビジョンを追加して、その部分のスタイリングを行います。これが私のWebサイトでの外観を実現した方法であり、以前のデフォルトのDrupalテーマ（Garland）で使用されていたソリューションでもあります。

#frame{
    margin-left: -200px;
}
于 2012-09-20T01:40:40.463 に答える
0

これは、100％の高さは、実際には「コンテナと同じ高さを使用する」ことを意味するためです。

ただし、このレイアウトのすべての要件を完全に把握することはできませんでした。ナビゲーションバーがナビゲーションバーの場合は、コンテンツが大きすぎるときにスクロールバーが表示されるように設計する必要があります。

しかし、これを実現するために間違った構造を使用していると思いますが、ラッパーdivが必要な実際の理由はありますか？私はこれについてフィドルを作成しました。これがあなたが望むものに近いかどうかを確認してください：http：//jsfiddle.net/6g6HV/2/

あなたがそれで遊びたい場合に備えて、これはあなたのものです：http: //jsfiddle.net/yq8PS/3/

編集：答えにjavascriptソリューションを追加するhttp://jsfiddle.net/6g6HV/9

于 2012-09-20T02:15:29.387 に答える
0

このコンテキストでは、Navbarの100％は残りの高さを意味するのではなく、親の表示されている高さの100％を意味します。したがって、親の高さが400ピクセルの場合、Navbarの高さも400ピクセルになります。このサイズにタイトルバーの高さを追加すると、親のサイズよりも大きい合計値が得られます。したがって、スコーリングバーの外観。

通常、画面の全長に表示されるように幅に問題はありませんが、HTMLとCSSでは、この種の目的で設計されていないため、高さと同じようにすることは非常に困難です。特に覆瓦構造（div内のdiv）の場合。

一部の人々はJavascriptを使用して画面のサイズ（ブラウザー）を取得し、それに応じてオブジェクトのサイズを計算しますが、純粋なHTML/CSSソリューションで同じことができるかどうかはわかりません。特に、ソリューションを多くのブラウザと互換性のあるものにしたい場合。

詳細については、http： //www.tutwow.com/htmlcss/quick-tip-css-100-height/をご覧ください。

于 2012-09-20T04:04:44.300 に答える