包含textarea的div與左側和右側的div重疊

我有一個由一系列div組成的對話框，用於標題，主體和頁腳，這些div分別被進一步細分爲左側，中間和右側部分。畫一個tic tac腳趾板，你就會明白。出於某種原因，只要我將textarea放在身體中心，它就會與左側和右側身體區域重疊。問題發生在使用「con」類的div部分的某處。包含textarea的div與左側和右側的div重疊

這裏的問題的一個畫面：http://s8.postimage.org/fvlt9qi51/Dialog_Overlap.jpg

編輯：我設法讓它通過更換工作高度：在CSS的.CON部分175px：隨高度100％。我不明白的是爲什麼看起來不錯，但身高：100％不？包含組成對話框的所有子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; }

來源

2013-01-11 Legion

現在你不需要爲每個角落都有一個div。我們有webkit。它可以做的事情真的很有必要 – Popnoodles

不幸的是，我沒有建立這個，我沒有太多的Web前端編碼經驗。所以webkit對我來說沒有任何意義。 – Legion

@Legion：你可以嘗試減小文本區域的寬度和高度，看看是否有幫助。減少文本區域的「cols」和「rows」值。 – Usha

這是很難幫助那裏得不到真實的東西。

塊.con及其左右部分有height:100%。這隻有在他們的父母具有像素高度時纔有效。現在這個左邊和右邊的部分是不可見的，因爲它們的高度爲0.如果你爲這個塊提供html和css外部div，幫助會更簡單。嘗試爲300像素設置固定高度。

此外，我可以建議骯髒的解決方法。在你的風格之後添加這個css：

.con { 
    border:9px solid #000; 
    border-width:0 9px; 
    padding:0 9px; 
    width:auto; 
}

來源

2013-01-11 23:05:38 antejan

不幸的是，這並沒有幫助。 – Legion

包含textarea的div與左側和右側的div重疊

回答

相關問題