1

在我的应用程序中，我希望所有内容都根据屏幕尺寸进行渲染。

但是 div 不渲染；

这是代码：

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

CSS：

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

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

编辑 ：

上面的 div 中使用了一些工具图标。因此，无论使用何种屏幕尺寸，图像图标的尺寸都保持不变。它不会根据屏幕尺寸呈现

4

7 回答 7

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

在这里工作小提琴

于 2013-07-17T07:11:45.773 回答
0

我认为，问题不在于您使用的 div 的大小。但是 icon 的大小，不会根据 div 的大小而变化。您要么使用非常小的图像，要么为它们提供固定宽度。用图像试试这个。根据您的应用程序，它们具有良好的标准尺寸。并写下这个。

.class{max-width:100%}

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

于 2013-07-17T07:18:59.660 回答
0

问题不能来自这个 div，因为没有定义固定尺寸。所以问题来自父div。您必须检查其所有父 div 是否没有固定值。

于 2013-07-17T07:19:08.963 回答
0

尝试这个：

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

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

小提琴

于 2013-07-17T07:10:49.147 回答
0

你给了“宽度：5％；”。这可能是您的 div 没有根据屏幕显示正确宽度的原因。使其“宽度：100％”。

此外，您已经定义了 {position:absolute; 顶部：0；对：0；底部：0；}。如果 top 是 0 那么为什么你把 bottom 设为 0 呢？这不是必需的。你可以删除它。

于 2013-07-17T07:11:16.380 回答
0

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

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

background:red;
font-size:50px;

对于任何对为什么会使用感到困惑的人，top:0; bottom:0;请阅读这篇文章CSS 100% height with absolute Position top 0 bottom 0

于 2013-07-17T07:21:28.777 回答
-1

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

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50px;
   overflow: hidden;
   background: #ffffff;
}
于 2013-07-17T08:11:11.940 回答