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