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

渲染試試這個：

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

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

Fiddle

Answer 2

你給 「寬度：5％;」。這可能是你的div沒有根據屏幕顯示適當寬度的原因。使其「寬度：100％」。

另外，您已經定義了{position：absolute;頂部：0;右：0;底部：0;}。如果top是0，那麼爲什麼你給底部0？這不是必需的。你可以刪除它。

Answer 3

如果通過「渲染」您知道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 4

我認爲，這個問題是不是你使用div的大小。但圖標的大小不會根據div的大小而改變。要麼使用非常小的圖像，要麼給定寬度。 試試這個圖像。根據您的應用，使用標準尺寸標記它們。並寫下這個。

.class{max-width:100%} 

這與重新大小根據格大小

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