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%，指定适合您需要的任何高度。

Working fiddle here

Answer 2

试试这个：

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

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

Fiddle

Answer 3

您已经给出了“宽度：5％;”。这可能是您的div没有根据屏幕显示适当宽度的原因。使它“宽度：100％”。

另外，你定义了{position：absolute;顶部：0;右：0;底部：0;}。如果top为0那么为什么你给底部为0？这不是必需的。你可以删除它。

Answer 4

我认为，问题不在于您使用的div的大小。但是图标的大小，根据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;而感到困惑的人，请阅读此帖CSS 100% height with absolute positioning top 0 bottom 0

Answer 7

我得到了解决方案。我只是给出宽度（以像素为单位）而不是％，它起作用了。

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

Div不根据屏幕大小进行渲染

7 个答案: