Question

我写了一个没有任何功能的小网页。当我直接在浏览器中打开此页面时，白色框将随浏览器垂直调整大小。但是如果我在Meteor中运行它，白盒子就不会超过400px。

我使用chrome工具比较了所有元素，但两个版本中的所有css属性似乎都相同。

要在普通浏览器中测试它，必须启用样式表链接。

的index.html：

<head>
</head>
    <!--link href="main.css" rel="stylesheet"/-->
<body>
   <div id="messages" class="relative content-box">
      <div id="chat-box" class=""></div>
  </div>
</body>

的main.css：

body {
  background-attachment: scroll;
  background-size: cover;
  background-color: #004269; }

.content-box {
  background-color: white;
  padding: 15px; }

.relative {
  position: relative; }

#messages {
  margin: 0;
  position: relative;
  min-height: 400px;
  padding: 10px; }

#chat-box {
  position: relative;
  min-height: inherit;
  padding-top: 0px;
  height: 100%;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: hidden;
  overflow-x: hidden; }

html {
  min-height: 100%;
  position: relative; }

body {
  margin-bottom: 190px;
  margin-top: 112px; }

.content-box {
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-top: 5px; }

Answer 1

好的，因为它是由Meteor添加的。这会更改文档高度的大小。更多详情可在这找到： <!DOCTYPE html> prevents me from resizing my <img>

流星中奇怪的css行为

1 个答案: