0

コンテナ DIV の位置:相対があります。その中にすべてを保持してから、1 つの左の列と 1 つの右の列、古典的なレイアウト。両方とも、この相対 #Main 内に絶対配置されます。権利を流動的にしたいので、top: 0px; とします。左: 280px; (左の列幅) right: 0px はすべて動作しますが、bottom:0px は動作しません。私は高さを言います: 100% まだ何もありません. 下部を除くすべてのエッジにスナップします。その div の高さは常に 1px または 0px です。px 値のみが機能しているように見えますが、それは使用できません。その理由は何ですか？リードはありますか？thx事前に...

コードは下に貼り付けます

HTML:

<div id="Main">
    <div id="LeftSection">
            <div id="Logo">

            </div>
            <div id="dvPanelMenu">

            </div>
    </div>

    <div id="RightSection">
        <div id="dvTopMenu">

        </div>
        <div id="dvLogin">

        </div>
        <div id="dvContent">

        </div>
    </div>         

</div>

CSS:

body {
    margin: 0px;
}
#Main
{
    position: relative;
}
#LeftSection
{
    position: absolute;

    width: 280px;
    height: 100%;
}
    #Logo
    {
    position: absolute;
    margin: 10px 0px 10px 30px;
    }
    #dvPanelMenu
    {
        position: absolute;
        top: 140px;
        left: 0px;
        width: 280px;
        height: auto;
        text-align: left;
    }
#RightSection
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;

    left: 280px;
    background-color: Blue;

}
#dvContent
{
    position: absolute;
    top: 36px;
    left: 2px;
    right: 0px;
    bottom: 20px;
    border: 1px dotted black;
}
    #dvTopMenu
    {
        position: absolute;
        top: 0.4em;
        left: 20px;
    }
    #dvLogin
    {
        position: absolute;
        right: 50px;
        top: 0.4em;
        font-family: Tahoma;
        font-size: 11px;
        text-align: left;
        color: Teal;
    }
4

2 に答える 2

0

#Main および #RightSection セレクターを次のように変更します。

#Main {
  margin: 0px;
  height: 100%; /* added */
}

#RightSection {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%; /* bottom: 0; replace by this */

  left: 280px;
  background-color: Blue;
}

また、これを読むことをお勧めしますhttp://www.webmasterworld.com/forum83/200.htm

于 2009-07-24T09:40:48.537 に答える
0

このように 2 列のレイアウトを行うことは必ずしもお勧めしません。フロートは、クロスブラウザーのような方法でうまく機能する傾向があります。そうは言っても、欠けているように見える主なものは、メイン div の高さです。100% の高さを入れてみてください。

正直なところ、私は絶対、相対、および絶対 + 相対ポジショニングを試しましたが、ほとんどの場合、一部のブラウザーの問題または何かが正しくないため、それを放棄しました。

float ベースのアプローチでは、次のようなものから始めます (Chrome 2、FF 3.5、IE8 で動作します):

<html>
<head>
<title>2 columns</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#Main { height: 100%; padding-left: 280px; }
#LeftSection { margin-left: -280px; width: 280px; height: 100%; background: yellow; float: left; }
#Logo { margin: 10px 0px 10px 30px; }
#dvPanelMenu { text-align: left; }
#RightSection { width: 100%; background: blue; height: 100%; min-height: 100%; padding-top: 70px; }
#dvTopMenu { float: left; margin: -65px 0 0 20px; height: 40px; background: red; width: 300px }
#dvLogin { float: right; margin: -65px 50px 0 0; font-family: Tahoma; font-size: 11px; text-align: left; background: green; height: 50px; width: 200px; }
#dvContent { border: 1px dotted black; width: 100%; border: 1px dotted black; background: orange; }
</style>   
</head>
<body>
<div id="Main">
  <div id="LeftSection">
    <div id="Logo">Logo</div>
    <div id="dvPanelMenu">dvPanelMenu</div>
  </div>
  <div id="RightSection">
    <div id="dvTopMenu">dvTopMenu</div>
    <div id="dvLogin">dvLogin</div>
    <div id="dvContent">dvContent</div>
  </div>         
</div>
</body>
</html>
于 2009-07-24T09:32:58.740 に答える