css - 如何使div的位置固定，即使它是空的？

Question

我想让我所有的 html 元素位置固定，但我遇到了这个问题:

有一个名为screen的div，默认情况下这个div是空的，所以它只有在添加内部HTML后才会出现。我想让这个 div 出现，即使它是空的。

这是我的CSS:

html{

    margin-top: 10%;
    position: fixed;
}

#calculator{

    background: gray;
    width: 40%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
    overflow: hidden;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

#calculator #screen{

    background: white;
    width: 95%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5%;
    position: relative;
}

那我该怎么做呢？

jsFiddle

Answer 1

您需要删除 HTML 样式，并将其替换为 BODY 样式:

body{

    padding: 10% 0px 0px 0px;
    margin: 0px;
    position: fixed;
    height:100%;
    width:100%;
    box-sizing: border-box;
    overflow:none;   /*  Gets rid of scroll bars.  Ditch it if you have a problem.  */
}

您很少会弄乱 HTML 元素。您需要为页面(文档 BODY)指定高度和宽度。默认情况下，计算器和屏幕 div 是相对于主体定位的，因此需要为其分配宽度和高度。这可能是一个见仁见智的问题，但您可以考虑添加“position:relative;”所有这些 div(编辑:除了 BODY 元素。可以是固定的或绝对的)。这是默认属性，但是当您开始添加按钮时，如果您绝对定位它们，它们将绝对定位到最近的嵌套 div。由于这很重要，您可能应该花时间使标记更加语义化。

填充短代码将除顶部外的所有填充设置为零。这是浏览器重置。与 margin:0px; 相同。您不应该向主体添加边距，因为如果您指定背景颜色，它可能不会向上移动到该边距区域。事实上，如果您为 HTML 元素设置背景，它会与正文的边距不同。

溢出:无；是为了防止滚动条。根据您正在做的事情，这应该不是问题，但是如果您有很多内容，比如说 3000 像素高，那么它会被隐藏起来，没有机制让访问者看到它。简而言之，溢出:无；在 body 上摆脱任何“折叠之下”。