將textarea的行高設置爲與背景中的li元素高度相同的百分比

我在設置textarea的行高時遇到了麻煩。我希望它始終與背景中的li元素具有相同的高度，因爲當您調整屏幕大小時，文本會越過線條並進入新行，這些行看起來並不好。我一直在想辦法解決這個問題，但我一直畫空白.. li有height的5%和我需要textarea的line-height也5%，但我需要的百分比是基於ul的height而不是content-wrapper的。有沒有可能以某種方式實現這一點？詳情請參閱下文。將textarea的行高設置爲與背景中的li元素高度相同的百分比

看看這個圖像（每行是一個li）：

explanatory picture

它具有這樣的結構：

<main class="full-height"> 
    <div id="top-bar"> 
     <button id="all-notes" class="btn brown-btn hide">Alla anteckningar</button> 
     <button id="add-note" class="btn brown-btn">Ny</button> 
     <input type="submit" form="note-text" value="Klar" id="done-btn" class="btn brown-btn hide"> 
     <button id="edit" class="btn brown-btn hide">Ändra</button> 
    </div> 
    <div id="content-wrapper" class="full-height"> 
     <div class="vertical-stripes"></div> 
     <div class="vertical-stripes"></div> 
     <ul id="note-block" class="reset"> 
      <li> 
       <span>Idag</span> 
       <span class="date"><?php include('datetime.php'); ?></span> 
       <span><?php echo date('H:i'); ?></span> 
      </li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
     <form id="note-text" method="post" action="../includes/notepages/savenote.php"> 
      <textarea name="textarea" id="notes-area">Text goes here</textarea> 
     </form> 
    </div> 
</main>

覆蓋一切還有textarea的的CSS li這構成了文本行。

ul#note-block { 
    height: 90%; 
    border: $thin-grey; 
    @include smoothEdges($bottomLeft: 10px, $bottomRight: 10px); 
    z-index: 1; 

    li { 
     height: 5%; 
     border-bottom: $thin-grey; 
     box-sizing: border-box; 
     background-color: $notes-yellow; 
    } 
} 

textarea#notes-area { 
    position: absolute; 
    top: 17%; 
    left: 12%; 
    width: 86%; 
    height: 72%; 
    line-height: 43px; //This can't be a fixed px height, needs to be 5% like the li above 
    padding: 0; 
    border: 0; 
    outline: 0; 
    resize: none; 
    overflow: auto; 
    background: none; 
    font-family: notesworthy; 
    font-size: 20px; 
}

來源

2015-01-07 Chrillewoodz

當CSS高度以百分比指定時，它是height of a containing element的百分比。因此，用5％的高度聲明元素仍然會因爲父母的高度不同的高度。

嘗試用於聲明高度如rem或vh其它相對單位中的一個。 1rem是相同的高度html元素的字體大小，而1vh爲1/1/100視口的高度。這兩個單位都將是相對於訪問者的瀏覽器，但同樣的，不管你是什麼元素造型。

來源

2015-01-07 19:24:03 KatieK

將textarea的行高設置爲與背景中的li元素高度相同的百分比

回答

相關問題