Question

我有一个具有一些css样式的div，因此它适合页面而无需滚动页面

#chat {
    width:100%;
    height:100%;
}
#messagebox {
    border: 0; 
    padding: 10px; 
    width: 90%;
    height:10%;
    margin:0;
    float:left;
}
.submitButton {
    padding:10px;
    width: 10%;
    height:10%;
    background: #003;
    float:right;
    border:0;
    color:white;
    cursor: pointer;
}
.submitButton:hover {
    background:#033
}
#messages {
    width:100%;
    height:90%;
    margin:0;
    overflow:auto;
}
#messages p { 
    padding: 5px 10px; 
    background: lightblue; 
    color:white;
}
#messages p:nth-child(odd) {
    background: white; 
    color:lightblue;
}
#messages p .deleteButton { 
    background: white; 
    color:lightblue;
}
#messages p:nth-child(odd) .deleteButton{
    background: lightblue; 
    color:white;
}

<div id="chat">
    <div id="messages">
        <p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p><p>Example Message</p>
    </div>
    <form id="chatForm">
        <input id="messagebox" required/>
        <button class="submitButton">
          Send
      </button>
    </form>
</div>

<p>

在这个div里面什么也没有。但是，只要收到来自服务器的消息，它就会添加shape。一旦填满，它应该具有滚动条，以防止它过高。但是，这不会发生，并且会继续填充。空时也看不见。我已经搜索了谷歌和stackoverflow无济于事。有人可以帮助我理解为什么我的CSS样式不起作用吗？

PS：javascript就在其中，因此当您单击发送按钮时它不会重新加载

Answer 1

可能您没有定义它：

html, body {
  height: 100%;
}

body和#chat之间的任何其他元素都一样-100％的高度需要参考。

否则，该DIV仅与其内容一样高，因此，如果没有内容，它将保持不可见。...

Answer 2

正文会向其父级（HTML）查找如何缩放动态属性，因此HTML元素也需要设置其高度。

但是，身体的内容可能需要动态更改。将高度设置为100％将实现您的目标。

:: Q:\Test\2018\11\09\SO_53230483.cmd
@echo off & setlocal
set "srcDir=P:\"
set "destdir=D:\"
set "lastmod="

For /f "usebackq delims=" %%a in (`
  powershell -NoP -C "(Get-ChildItem -Path '%srcDir%' -Filter '*.mp4' -File -Recurse | Sort-Object LastWriteTime -Descending | Select-Object -First 1).FullName"
`) Do Set "lastmod=%%a"

If defined lastmod (
   copy "%lastmod%" "%destDir%Current.mp4"
) else (
   Echo couldn't obtain lastmod file
)

chatForm.addEventListener('submit', function(e){
    e.preventDefault()
    //sends message
   
});

html, body {
  height:100%;
}

#chat {
    width:100%;
    height:100%;
}
#messagebox {
    border: 0; 
    padding: 10px; 
    width: 90%;
    height:10%;
    margin:0;
    float:left;
}
.submitButton {
    padding:10px;
    width: 10%;
    height:10%;
    background: #003;
    float:right;
    border:0;
    color:white;
    cursor: pointer;
}
.submitButton:hover {
    background:#033
}
#messages {
    width:100%;
    height:90%;
    margin:0;
    overflow:auto;
}
#messages p { 
    padding: 5px 10px; 
    background: lightblue; 
    color:white;
}
#messages p:nth-child(odd) {
    background: white; 
    color:lightblue;
}
#messages p .deleteButton { 
    background: white; 
    color:lightblue;
}
#messages p:nth-child(odd) .deleteButton{
    background: lightblue; 
    color:white;
}

空div不可见

2 个答案: