0

ヘッダー、ボディ、フッターの一連の div で構成されたダイアログ ボックスがあり、それぞれ左、中央、右のセクションにさらに分割されています。三目並べボードを想像してみてください。何らかの理由で、本文中央にテキストエリアを配置するとすぐに、左右の本文 div に重なってしまいます。問題は、「con」クラスを使用する div セクションのどこかで発生しています。

ここに問題の写真があります: http://s8.postimage.org/fvlt9qi51/Dialog_Overlap.jpg

編集: CSS の .con セクションで、height: 100% を height: 175px に置き換えることで、なんとか機能させることができました。私が理解していないのは、なぜそれが問題ないように見えるのですか? ダイアログを構成するすべてのサブ div を含む最上位の div には、ダイアログのヘッダーとフッターと同様に、ピクセル単位で指定された寸法があります。中央にも正確な値を指定する必要があるのはなぜですか? ダイアログ ボックスの中央に特定の高さの値を追加できるように、ダイアログ ボックスごとに特別な CSS クラスが必要になるため、この方法は使用したくありません。

下がHTML、その下がCSSです。

    <div class="ttl">
        <div class="ttlt">
            <div class="ttlt-l"></div>
            <div class="ttlt-m">
                <a class="close" href="javascript:void(0);" onclick="cancelNotes();this.blur();return false;"></a>
                <span>Create Note</span>
            </div>
            <div class="ttlt-r"></div>
        </div>
        <div class="ttlb">
            <div class="ttlb-l"><span></span></div>
            <div class="ttlb-m"><span></span></div>
            <div class="ttlb-r"><span></span></div>
        </div>
    </div>

    <div class="con">
        <div class="con-l"></div>
        <div class="">
            <input type="hidden" id="hdnNoteID" />
            <textarea id="txtNote" rows="11" cols="50"></textarea>
        </div>
        <div class="con-r"></div>
    </div>

    <div class="ftr">
        <div class="ftr-l"></div>
        <div class="ftr-m">
            <a onclick="cancelNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Cancel</span></a>
            <a onclick="addNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Add Note</span></a>
        </div>
        <div class="ftr-r"></div>
    </div>

CSS

/* Title Bar */

.ttl { width:100%;height:38px; }

    /* Close button */
    .ttl a { margin-top:4px;display:block;float:right;width:23px;height:21px;background:transparent url("img/dialog/static.png") no-repeat -18px 0;cursor:default; }
    .ttl a:hover { background-position:-18px -21px; }
    .ttl a:active { background-position:-18px -42px;outline:none; }

    .ttlt { width:100%;height:30px; }
        .ttlt-l { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat;float:left; }
        /* ttlt-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
        .ttlt-m { width:432px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
        .ttlt-mWide { width:632px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
        .ttlt-mExtraWide { width:930px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
        .ttlt-r { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat -9px 0;float:left; }
    .ttlt span { cursor:inherit;margin-left:4px;line-height:30px;color:#fff;font-weight:bold;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; }

    .ttlb { width:100%;height:8px; }
        .ttlb span { display:none; }
        .ttlb-l { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat 0 -30px;float:left; }
        /* ttlb-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
        .ttlb-m { width:432px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
        .ttlb-mWide { width:632px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
        .ttlb-mExtraWide { width:930px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
        .ttlb-r { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat -9px -30px;float:left; }

        .tabbed .ttlb-l { background-position:0 -38px; }
        .tabbed .ttlb-m { background-position:0 -75px; }
        .tabbed .ttlb-r { background-position:-9px -38px; }



/* Body */
.con { width:100%;height:100%;background-color:#fff;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; cle}
    .con-l { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y;float:left; }
    /* con-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
    .con-m { width:432px;height:100%;background-color:#fff;float:left; }
        .con-m .top { margin-top:2px; }
    .con-mWide { width:632px;height:100%;background-color:#fff;float:left; }
    .con-mExtraWide { width:930px;height:100%;background-color:#fff;float:left; }
    .con-r { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y -9px 0;float:left; }



/* Dialogue footer */
.ftr { width:100%;height:37px;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; clear: left;}
    .ftr-l { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat 0 -75px;float:left; }
    /* ftr-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
    .ftr-m { width:432px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
    .ftr-mWide { width:632px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
    .ftr-mExtraWide { width:930px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
    .ftr-r { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat -9px -75px;float:left; }
4

1 に答える 1

0

実物に触れずにそこを助けるのは難しい。

ブロック.conとその左右のパーツには がありheight:100%ます。これは、親の高さがピクセル単位である場合にのみ機能します。この左右のパーツは、高さが 0 であるため、非表示になります。このブロックの外側の div に html と css を提供すると、より簡単に支援できます。300px のように固定の高さを設定してみてください。

また、汚い回避策を提案することもできます。スタイルの後にこの css を追加します。

.con {
  border:9px solid #000;
  border-width:0 9px;
  padding:0 9px;
  width:auto;
}
于 2013-01-11T23:05:38.907 に答える