parent-div overflow-y打破子div的邊界

我有一個固定的寬度和高度的父div塊，其中是一個child-div塊（具有相同的寬度/高度），我我正在填充用戶的消息。隨着消息量的增加，我希望能夠向下滾動該塊以查看所有用戶的消息，而不會破壞當前正在發生的div塊邊界。是否有任何適當的技術可以將所有消息保留在div邊界內？parent-div overflow-y打破子div的邊界

請看看這個問題的樣子。

#chat_messages { 
 
    width: 700px; 
 
    float: left; 
 
    height: 570px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
#inner_messages { 
 
    width: 700px; 
 
    height: 570px; 
 
    font-size: 14px; 
 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
 
    font-weight: normal; 
 
    background: #fedc3d; 
 
    color: #000000; 
 
    border: 5px solid #01abaa; 
 
    word-wrap: break-word; 
 
    white-space: initial; 
 
}

<!doctype html> 
 

 
<html> 
 
    
 
<head> 
 
<title>Test Page</title> 
 
</head> 
 
    
 
<body> 
 
    <div id="chat_messages"> 
 
    <div id="inner_messages"> 
 
    </div> 
 
    </div> 
 
</body> 
 
    
 
</html>

來源

2016-11-25 Pawel Wasiliuk

您的代碼工作。我重新安排了一下CSS。

Codepen Link

HTML：

<div id="chat_messages"> 
    <div id="inner_messages"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia numquam, consequuntur nesciunt non, voluptatem nostrum, ducimus rerum hic ipsum, cumque eius. Saepe et dolore odio illum a! Ad, amet, asperiores?loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad repudiandae officiis soluta maiores, mollitia libero optio error quidem distinctio sed molestias doloremque asperiores assumenda beatae temporibus cum sit vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe repudiandae perspiciatis quidem non. Eos, in repellendus voluptas rem, voluptatibus numquam ipsa molestias quam id autem quas hic vero expedita tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni doloribus, commodi libero deserunt nobis error necessitatibus officiis quaerat dicta ex obcaecati, quo laboriosam non nesciunt quod illum nihil eveniet dignissimos? 
    </div> 
    </div>

CSS：

#chat_messages { 
    width: 700px; 
    float: left; 
    height: 100px; 
    overflow-x: hidden; 
    overflow-y: auto; 
     font-size: 14px; 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, 
    font-weight: normal; 
    border: 5px solid #01abaa; 
     background: #fedc3d; 
} 

#inner_messages { 
    color: #000000; 
    word-wrap: break-word; 
    white-space: initial; 
}

來源

2016-11-25 00:34:19 Swapna

現在，一切似乎看起來就像我想要的方式。感謝您的幫助！ –

parent-div overflow-y打破子div的邊界

回答

相關問題