2012-06-17 88 views
0

我遇到了本網站正在建設中的問題。我需要一個固定的寬度,以便我可以做margin-left和margin-right auto(居中左窗口上的表單項)。問題是我試圖使這個代碼模塊化,以便它可以與任何未來一起工作我決定創建一個表格,這意味着我需要一個可變高度,這取決於一個表格需要多少個字段。CSS最小高度不會調整背景顏色和邊框

所以爲了澄清上述說明,我試圖保持固定的寬度並且具有可變的高度(使用最小高度)的問題是,背景色和DIV邊界不收縮或與格大小擴大沿着任何想法

該網站是在這裏:?http://traelid.com/news/createNews.php

這裏是我的表單代碼和m ŸCSS代碼:

FORM:

<script type='text/javascript' src='../nicEdit/nicEdit.js'></script> 
<script type='text/javascript'> 
    bkLib.onDomLoaded(function() {nicEditors.allTextAreas() }); 
</script> 

<div class='frmcontainer'> 

    <div class='title'>TraeLid News</div> 

    <div class='fill'> 

     <div class='row'> 

      <div class='frm lbl'> 
       <label for='author'>Author:</label> 
      </div> 

      <div class='frm itm'> 
       Auto Author 
      </div> 

     </div> 

     <div class='row'> 

      <div class='frm lbl'> 
       <label for='subject'>Subject:</label> 
      </div> 

      <div class='frm itm'> 
       <input class='itm itmtxt' type='text' name='subject' /> 
      </div> 

     </div> 

     <div class='row'> 

      <div class='frm lbl'> 
       <label for='content'>Content:</label> 
      </div> 

      <div class='frm itm txtarea' style='background-color:#fff;'> 
       <textarea class='itm itmtxtarea ckeditor' name='content'></textarea> 
      </div> 

     </div> 

     <div class='row'> 

      <div class='frm lbl'> 
       <label for='tags'>Tags:</label> 
      </div> 

      <div class='frm itm'> 
       <input class='itm itmtxt' type='text' name='tags' /> 
      </div> 

     </div> 

    </div> 


</div> 

CSS:

.frmcontainer 
    { 

    text-align:center; 

    width:750px; 
    min-height:200px; 
    margin-left:auto; 
    margin-right:auto; 

    border-radius:10px; 
    border-width:1px; 
    border-style:solid; 

} 

.frm 
{ 
    margin:5px; 
} 


.title 
{ 
    clear:both; 

    width:750px; 

    margin-bottom:24px; 

    font-size:28px; 
    font-weight:bold; 
    text-decoration:underline; 
    font-variant:small-caps; 

} 

.row 
{ 
    width:750px; 
    height:auto; 

    float:left; 
    clear:both; 
} 

.lbl 
{ 
    font-size:18px; 
    font-weight:bold; 

    text-align:left; 

    height:30px; 
    width:150px; 

    float:left; 

} 

/*Container and input styles*/ 

.itm 
{ 
    text-align:left; 

    height:25px; 
    width:580px;   

    float:left; 
} 

.itmtxt 
{ 
    width:576px; 

    border-style:solid; 
    border-width:1px; 
} 

.txtarea 
{ 
    height:400px; 
} 

.itmtxtarea 
{ 
    width:578px; 

    height:343px; 

    border-style:solid; 
    border-width:1px; 
} 
.nicEdit-panel 
{  
    background-color: #eee; 
} 
.nicEdit-selected 
{  
    background-color: #fff; 
    word-wrap:break-word;; 
    overflow:hidden; 
} 
.nicEdit-main 
{ 
    word-wrap:break-word; 
    overflow:hidden; 
    max-height:343px; 
} 

回答

1

上.frmcontainer添加overflow: hidden;fiddle ex

+0

我能夠解決它的位置:絕對; –

+0

問題是你的浮動,他們不自動調整背景。增加'overflow:hidden;'將會使它計數。這是因爲你沒有身高,無處可切。 – Fewfre

+0

@DavidTorrey夠了;) – Fewfre