瀏覽器視圖內容崩潰，當窗口最小化？

Question

如果browser window是fully maximized，我的應用程序看起來不錯。並且當我minimized的browser window時，內容得到collapsed。

我不需要將內容摺疊。我已給div看起來像textarea僅在%中顯示消息。

我將JSP是，

<div style="padding-left: 16px;" id="messageLayout"> 
    <div id="messageDisplayArea" > 

    </div> 
</div> 

我jquery會，當我點擊了send button，

function send(){ 
    name = $("#name").val(); 
    message = $("#message").val(); 
    var time = "Time"; 

    var user = "<div id='user' class='fontStyle'>"+name+"</div>"; 
    var msg = "<div id='msg' class='fontStyle'>"+message+"</div>"; 
    var timeStamp = "<div id='time' class='fontStyle'>"+time+"</div>"; 

    var row = "<div id='msgSet' >"+ user + msg + timeStamp +"</div>"; 

    $("#messageDisplayArea").append(row); 
} 

我CSS會，

#messageDisplayArea { 
    height: 250px; 
    width: 100%; 
    overflow: auto; 
    border-color: #6495ED; 
    white-space: normal; 
    border-style: solid; 
    border-width: 1px; 
    background-color: white; 
} 

#user { 
    width: 10%; 
    float: left; 
    color: red; 
    word-wrap: break-word; 
} 

#msg { 
    width: 79%; 
    color: green; 
    float: left; 
    word-wrap: break-word; 
} 

#time { 
    width: 10%; 
    float:left; 
    color: gray; 
    word-wrap: break-word; 
    padding-left: 5px; 
} 

#msgSet { 
    width: 100%; 
    float:left; 
    word-wrap: break-word; 
    padding-bottom: 5px; 
    padding-top: 5px; 
} 

很好的答案是肯定讚賞。

Answer 1

試試刪除你的word-wrap: break-word