Question

我有两个DIV。一个用于保存消息。另一个用于显示消息内容。但我有一个问题。这两个DIV都有这么大的空间。我如何解决它？

＆＃13;

#messages {
  border: 1px solid rgb(43, 68, 233);
  height: 770px;
  width: 300px;
}
#chat-content {
  height: 770px;
  width: 1283px;
  border: 1px solid rgb(43, 68, 233);
  position: relative;
  left: 300px;
  bottom: 770px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='style.css'>
  <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
  <script type='text/javascript' src='jquery-ui.js'></script>
</head>

<body>
  <div id='messages'>

  </div>
  <div id='chat-content'>

  </div>
</body>

</html>

＆＃13;

Answer 1

您的第二个div位于窗口底部770px处：bottom: 770px。这就是造成差距的原因。由于您正在处理定义的固定宽度，因此您可以使用top和left进行绝对定位。请记住，您的第二个div上的left也需要适应边框宽度（+ 2px），因为您的第一个框实际上是302px宽，而不是300（带边框）。

#messages {
   border: 1px solid rgb(43, 68, 233);
   height: 770px;
   width: 300px;
   position:absolute;
   left: 0;
   top: 0;
 }


 #chat-content {
   height: 770px;
   width: 1283px;
   border: 1px solid rgb(43, 68, 233);
   position:absolute;
   left: 302px;
   top: 0;
 }

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui.js'></script>
</head>

<body>
    <div id='messages'>
    </div>
    <div id='chat-content'>
    </div>
</body>
</html>

CSS中内容下的空间

1 个答案: