CSS：寬度/高度屬性只響應px（不是％）

當我寫了下面的HTML元素：

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10%**','height' : '**10%**'}"

我得到一個白色的網頁。

然而，當我替換「％」與「像素」和寫：

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10px**','height' : '**10px**'}"

我得到屏幕的角落一個小紅場。可能，我使用百分比功能錯誤。你能告訴我有什麼問題嗎？

你可以在這裏找到你的答案。 http://stackoverflow.com/questions/14545507/div-height-in-percentage –

<div class="parent" style="width: 100%; height: 500px"> 
 
    <div style="width: 10%; height: 10%; background: red"></div> 
 
</div>

我認爲你需要有一個家長，你的百分比寬度和高度將基地。

2016-11-01 07:40:52 GvM

當您使用百分比時，將對象的大小定義爲父級的百分比。如果你的div的父母的體積很小，例如100px x 100px設置您的div爲10％寬度和10％高度將最終得到具有10px x 10px大小的div（因爲這是父級大小的10％）。

確保你的div的父級大小是你想要的。最好的方法是使用內置在瀏覽器中的開發者工具。

2016-11-01 07:41:26 Baumi

因此，無論何時我使用％，我是否始終必須以元素開始，並將其定義爲100％，然後定義它的全部後代？ – CrazySynthax

當然不是。父並不總是html元素（實際上你不應該用'html'而是'body'來代替）。父是包含您的div的元素。父母的樣式和位置只取決於你（例如，它可以被定位爲「固定」，這將不取決於你的身體尺寸等）。 – Baumi

當我定義：「身體{寬度：100％;身高：100％}」，它不起作用。只有當我寫道：「html。body {width：100％; height：100％}」時，我得到了紅色方塊。所以......我認爲這意味着我們必須從標籤開始。 – CrazySynthax

'％' 需要啊的位置是：如果你想使用％寬度和高度試試這個

<div style="position:absolute;background: red;table-layout: fixed;width:10%;height:10%;"></div>

2016-11-01 07:45:10 prasanth

。首先你需要一些px的outher div。

Check this out: https://jsfiddle.net/JakubL/sjtcvwdr/

外div有1920px的高度和寬度1440px所以DIV測試，（你的紅方）的div將有192px的高度和寬度144px。

2016-11-01 07:50:17

理論上，這可能會回答OP的問題，但根據網站的規則，您需要在此處發佈代碼並將鏈接用作參考或演示。請在這裏寫下你的代碼，否則這個帖子很快就會被移除 – Danh

回答