顯示區域的CSS滾動條

我對CSS HTML很新。我有一個小問題，我需要幫助。顯示區域的CSS滾動條

我在CSS中爲顯示區域定義了以下標記以顯示一組問題。我爲我的顯示區繪製了一個靜態邊框，但有時顯示區域內的文本超出高度並流出。我想通過添加滾動條併爲我的顯示區域定義適當的高度來解決此問題。我的問題可能還不清楚。所以我插入了一張圖片供參考。

#disp_desc{ 
      position: absolute; 
      COLOR:cyan; 
      font-size:16px; 
      font-family: Verdana; 
      width: 55%; 
      top: 255px; 
      left: 215px; 
      margin-left: ; 
      margin-right: ; 
      text-align: left; 
      overflow-y: scroll; 
    } 

<div id="problemform" class="form-inline"> 
     <textarea id="probleminput" class="form-inline" type="text" style="display: inline;"></textarea> 
     <button id="problemsubmit" class="btn" type="submit" style="display: inline-block;">Submit</button> 
    </div>

reference iamge

第一次接觸是我的顯示區域。忽略內容和輸入框。我只想讓整個文本使用滾動條放入定義的邊框內。

另外我希望滾動條僅在文字大小足夠大時顯示。否則，即使對於1-2行的內容，滾動條也沒有意義。我可以用CSS控制它嗎？

來源

2014-04-25 Htlcs

你可以發表你的'markup'嗎？ – rockStar

不要在佈局中使用'position：absolute'。是的，它看起來像你正在尋找的解決方案，如「位置」，如果它不是用於定位而是不用，它有什麼用處。大號這是一個災難的祕訣。是的，我們大多數人在開始時都嘗試過:)更好地使用浮點數（並學習'clear'可以做什麼以及* clearfix *的概念是什麼）和'display：inline-block'以及後面的'display：table'和'table-cell' – FelipeAls

您的#disp_desc元素沒有指定height，並且絕對定位它沒有什麼可以假設的高度。因此，你的元素的高度根本不受限制，並且會繼續增長。

爲了解決這個問題，只要給它一個高度：

#disp_desc { 
    ... 
    height: 100px; 
}

來源

2014-04-25 15:50:14

還有一個問題，如果你不介意在這裏回答。我希望只有當文字大小足夠大時才能自動顯示滾動條。當文本的大小像1或2行那樣相對較小時，我不希望它被顯示。然後滾動條沒有意義，但仍然顯示。我可以控制這在CSS中，或者我必須在JavaScript中做到這一點？ – Htlcs

@JimZilla將'overflow-y'設置爲'auto'而不是'scroll'。 –

你做了我的一天！非常感謝。 – Htlcs

位置：絕對的;作品很won，，我會建議看看位置：親戚;這將允許你做這樣的事情在HTML：

HTML：

<div class="cyanBox"> 
    <div id="disp_desc"> 
     //THIS IS WHERE YOUR TEXT WILL GO 
    </div> 
</div>

CSS：

.cyanBox 
{ 
    position: relative; //Adjust with margins if needed. 
    height: 150px; 
    width: 500px; 
    overflow: auto; 
] 

#disc_desc 
{ 
    position: relative; 
    height:100%; //Setting position relative with height and width 100% will 
    width:100%; //Cause the description to fill the box, and with overflow Auto 
    //Font Styling. //On the box, when it is too long a scroll will be made. 
}

來源

2014-04-25 16:06:03 PugsOverDrugs

顯示區域的CSS滾動條

回答

相關問題