Javascript Div未根据屏幕大小进行渲染

在我的应用程序中，我希望根据屏幕大小渲染所有内容

但是div没有渲染

以下是代码：

<div id="tools" class="open">
.....
</div>

它不会根据屏幕大小进行渲染。请为我提供一些可行的解决方案

编辑：

在上面的分区中使用了一些工具图标。所以无论使用什么屏幕大小，图像图标的大小都保持不变。它不会根据屏幕大小进行渲染，请尝试以下操作：

#tools {
    position:absolute; 
    top:0; 
    right:0;
    width:5%;
    overflow:hidden; 
    background:red;
}

html, body {
    width: 100%;
    height: 100%;
}

您已经给出了“宽度：5%”。这可能是您的div没有根据屏幕显示正确宽度的原因。让它成为“宽度：100%”

此外，您还定义了{position:absolute；top:0；right:0；bottom:0；}。如果顶部为0，那么为什么底部为0？？这不是必需的。您可以将其删除。

如果通过“呈现”您了解到

div

未显示，这是因为您需要指定其

高度。此外，避免使用ID进行CSS标识。改用它的类

CSS:

指定适合您需要的高度，而不是高度：10%

我认为，问题不在于你使用的div的大小。但图标的大小不会随div的大小而改变。可以使用非常小的图像，也可以为它们指定固定的宽度。 用图片试试这个。根据您的应用程序，使用标准尺寸制作。然后写下这个

这需要根据div大小重新调整它们的大小

---

问题不能来自此div，因为未定义固定维度。因此，问题来自父div。您必须检查其所有父div是否都没有固定值。

它工作正常，只需添加一些颜色，您就可以看到它

---

对于那些对为什么要使用

top:0感到困惑的人；底部：0然后读这篇文章
我得到了我的解决方案。我只是用像素来表示宽度，而不是用%来表示，这样就行了

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50px;
   overflow: hidden;
   background: #ffffff;
}

你能澄清你的意思吗？到底发生了什么？定义“渲染”-你是说它的高度不正确吗？它到底在显示吗？为什么需要
bottom:0当您使用
top:0看起来你没有给它一个高度。如果里面没有内容，那么它将不可见。编辑：外星人先生是对的，使用
top
和
bottom
毫无意义。虽然
width:5%
如果他想要的话也可以。问题不可能来自这个div，而是来自一个父div。检查它的所有父div是否都没有固定的值。我不能给width 100%，因为如果我给100%，那么它将覆盖整个区域，而在上面div的左侧是一个画布。假设它的父div是画布，那么5%应该可以工作（可能是
）具有指定的width@Rishi然后以百分比的形式给出你想要的宽度和高度，但当屏幕大小改变时，它不起作用。每个屏幕看起来都一样size@Rishi不，它确实有效。它的宽度根据屏幕大小而变化。将宽度增加到50%以清晰地看到它。根据sc，Render意味着它的宽度不会变大变小绿色大小。实际上你根本不需要提供
高度
当屏幕显示时，你想要工具扩展吗？我想这就是使用%
.open {
    position:absolute; 
    top:0; 
    right:0;
    bottom:0;
    width:5%;
    height:10%;
    overflow:hidden;
    background:#999999;
}

.class{max-width:100%}

background:red;
font-size:50px;

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50px;
   overflow: hidden;
   background: #ffffff;
}