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