Question

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

有一个名为div的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

首先，您确定该元素尚未显示吗？

你可以这样测试：

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

更新：不显示任何内容。

如果这不起作用，请尝试：

#calculator #screen{
    background: white;
    width: 100px;
    height: 100px;
    background-color: black;

更新：显示黑匣子。我们发现问题在于父元素的未定义宽度和高度，因此我们可以做以下两件事之一：

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

2）为其中一个父元素定义宽度和高度，例如正文（如图here所示）

body {
    width: 100px;
    height: 100px;
}

这很好地解决了这个问题。

其余的旧答案：

如果没有，那么你的结构就错了。

请记住，只要父元素（容器）具有已定义的宽度和高度，比例宽度和高度就会起作用。

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

Answer 2

您需要删除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。由于这很重要，你应该花点时间让标记更具语义性。

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

溢出：无;是为了防止滚动条。它应该不是基于你正在做什么的问题，但是如果你有很多内容，比如说3000像素高，那么它将被隐藏，没有任何机制供访问者看到它。简而言之，溢出：无;身体上的任何东西都“摆脱了”。

Answer 3

这应该有效

#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;
}

Answer 4

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

虽然我不知道为什么......

我每次都会检查w3学校

http://www.w3schools.com/cssref/pr_class_position.asp

Answer 5

你必须给元素一个高度和宽度的显示。

示例：

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

Answer 6

#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;
}

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

6 个答案:

首先，您确定该元素尚未显示吗？

如果这不起作用，请尝试：

其余的旧答案：