Div不会根据屏幕尺寸进行渲染

Question

在我的应用程序中，我希望所有内容都根据屏幕大小呈现。

但是div没有渲染;

这是代码：

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

css：

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

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

编辑：

上面div中使用了一些工具图标。 因此，无论使用什么屏幕尺寸，图像图标的尺寸都保持不变。 它不会根据屏幕尺寸进行渲染

Answer 1

如果通过“渲染”了解到div没有显示，那是因为您需要指定其height 。 此外，请避免将ID用于CSS识别。 请改用其类。

CSS：

.open {
    position:absolute; 
    top:0; 
    right:0;
    bottom:0;
    width:5%;
    height:10%;
    overflow:hidden;
    background:#999999;
}

代替height:10% ，指定任何适合您需要的高度。

在这里工作

Answer 2

尝试这个：

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

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

小提琴

Answer 3

您给出了“ width：5％;”。 这可能是您的div根据屏幕显示的宽度不正确的原因。 将其设置为“宽度：100％”。

另外，您还定义了{position：absolute; 顶：0; 对：0; bottom：0;}。 如果top为0，那么为什么要赋予bottom为0？ 不需要。 您可以删除它。

Answer 4

我认为，问题不在于您使用的div的大小。 但是icon的大小不会根据div的大小而变化。 您可以使用非常小的图像或给定的固定宽度。 尝试用图像。 根据您的应用，以合适的标准尺寸将其销毁。 并写下来

.class{max-width:100%}

根据div大小重新调整大小

Answer 5

由于未定义固定尺寸，因此问题不会出自此div。 所以问题出在父div上。 您必须检查其所有父div是否都没有固定值。

Answer 6

它工作得很好，只需要添加一些颜色就可以看到它

http://jsfiddle.net/A2JjN/2/

background:red;
font-size:50px;

对于那些对为什么可能使用top:0; bottom:0;感到困惑的人top:0; bottom:0; top:0; bottom:0; 然后阅读这篇文章CSS 100％高度，绝对定位顶部0底部0

Answer 7

我找到了解决方案。 我只是以像素为单位而不是％提供宽度，它可以工作。

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