我写了一个没有任何功能的小型网页。当我直接在浏览器中打开此页面时,白框将随浏览器垂直调整大小。但是,如果我在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; }

最佳答案

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

关于css - meteor 中奇怪的CSS行为,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27866696/

10-11 22:12
查看更多