Css 如何使div的位置是固定的，即使它是'；是空的吗？

我想使我所有的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;
}

那我怎么能做到呢

这应该行得通

#calculator #screen{
    background: white;
    min-width: 95%;   /*added min-width and min-height */
    min-height: 15%;
    width: 95%; /* you may need to add something like this, but try without first*/
    height: 15%;  /* you may need to add something like this, but try without first*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5%;
    position: relative;
}

---

你不能定位你的html，如果你想定位你的整个网站，只要做一个div，定位它固定

虽然我不知道为什么

我每次都去w3学校

首先，您确定元素尚未显示吗？ 您可以这样测试它：

#calculator #screen{
    background: white;
    width: 95%;
    height: 15%;
    background-color: black;

更新：不显示任何内容。

如果不起作用，请尝试以下方法： 更新：显示黑框。我们发现问题在于父元素的宽度和高度未定义，因此我们可以做以下两件事之一：

1）在网页上放置一些内容，或

2）定义父元素之一的宽度和高度，例如body（如图所示）

这很好地解决了问题。

旧答案的其余部分： 如果没有，那么你的结构是错误的

请记住，只有父元素（容器）具有定义的宽度和高度时，比例宽度和高度才起作用

---

检查它是否已定义且应按预期工作。

您必须为元素显示指定高度和宽度

例如：

#screen {
    position: fixed;
    width: 95%;
    height: 15%;
}

---

您需要删除HTML样式，并将其替换为正文样式：

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元素。您需要为页面（文档正文）指定高度和宽度。默认情况下，计算器和屏幕div相对于主体定位，因此需要为其指定宽度和高度。这可能是一个观点的问题，但是你可以考虑将“位置：相对”添加到所有这些div（编辑：除了身体元素。可以是固定的或绝对的）。这是默认属性，但当您开始添加按钮时，如果绝对定位按钮，则它们将绝对定位到最近的嵌套div。由于这一点很重要，您可能需要花时间使标记更具语义

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

---

溢流：无；是为了防止滚动条。基于你所做的事情，这应该不是一个问题，但是如果你有很多内容，比如说3000像素高，那么它就会隐藏起来，没有任何机制让访问者看到它。简言之，溢出：无；“在正文上删除任何“隐藏”的内容。

请发布您的HTML和JSFIDLE。@Josh Powell我添加了链接。我已经更新了我的答案，以反映您的结构，只做了最小的更改。然后，您的HTML结构出现错误。请在jsfiddle.net上发布您的代码，然后“保存”和“共享”并在这里发布链接，以便我们可以检查它。请在jsfiddle链接中查看我的HTML

#screen {
    position: fixed;
    width: 95%;
    height: 15%;
}

#calculator #screen{
  background: white;
  min-width: 95% !Important;   /*added Important*/
  min-height: 15% !Important;   /*added Important*/
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5%;
  position: relative;
}

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.  */
}