絕對股利相對Div的內部P含量不溢出

所以，我試圖使客艙，具有如下：絕對股利相對Div的內部P含量不溢出

  <div class="text-container"> 
       <div class="text" id="textholder"> 
        <p>message</p> 
        ... 
        <p>message</p> 
       </div> 
      </div> 

      <div class="chatbox-container"> 
       <div class="chatbox"> 
        <input type="text" id="textinput" class="inputText" placeholder="Enter text" /> 
        <input type="submit" class="send" onclick="addMessage()" value="Send" autofocus /> 
       </div> 
      </div>

用下面的CSS：

.text-container{ 
    width: 100%; 
    height: 500px; 
    overflow: auto; 
    position: relative; 
} 

.text{ 
    position: absolute; 
    bottom: 0px; 
    left: 25%; 
    width: 50%; 
    height: auto; 

} 

.chatbox-container{ 
    width: 100%; 
    height: 30px; 
    overflow: auto; 
}

我在哪裏添加使用addMessage（）函數來添加更多p（只是將文字段添加到#textholder的innnerHTML中）

現在問題是我無法獲取文本div溢出（auto），這意味着文本只是消失。我希望文本位於文本容器的中心，但我希望滾動位於容器上，因此它看起來像在Skype中。

我該怎麼做？另外，我試圖以類似skype的方式將消息基本對齊到文本框的底部，但我讀過這也可以通過垂直對齊來完成。但這並沒有工作，我想要它。

希望你能得到我所要求的，英語不是我的母語，我不確定我是否以正確的方式提問。

在此先感謝！

ps。請考慮到這是更大頁面的一部分，因此我省略了一些部分。

來源

2013-11-21 DemoDreams

Ammend您text類：

.text{ 
    position: absolute; 
    bottom: 0px; 
    height: 500px; //fix the height 
    width :90%; 
    overflow: auto; //scroll the content 

}

小提琴：http://jsfiddle.net/logintomyk/pETfX/

所做的container溢出，而消息是text，所以你需要的溢出類的伴侶！ :)

來源

2013-11-21 16:02:08 NoobEditor

哦，你看這就是問題所在，我對齊文本的div是在中心，然後希望滾動到一邊（再次，像在Skype中）。我確實忘記提及這一點。 – DemoDreams

滾動條會出現在任何你'文本'類div將結束....給它'100％'寬度（它的'90％'目前在小提琴）推到完整的一面.... – NoobEditor

也許這是你在找什麼

.text-container { 
    height:200px; 
    overflow: auto; 
    border:1px solid #ccc; 
} 
.chatbox-container { 
    height: 30px; 
}

jsfiddle

來源

2013-11-21 16:18:33

絕對股利相對Div的內部P含量不溢出

回答

相關問題