CSS: width/height属性只响应px(不是%)

Question

我想在网页上创建一个红色方块。

当我写入以下html元素时:

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

我得到一个白色的网页。

但是，当我将'%'替换为'px'并写入:

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

我在屏幕的角落得到一个红色的小方块。可能我用错了百分比特征。你能告诉我是什么问题吗?

Answer 1

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

我认为你需要有一个父元素，你的宽度和高度百分比的基础。

Answer 2

当使用percent时，您将对象的大小定义为父对象的百分比。如果div的父元素的尺寸较小，例如100px x 100px，那么将div设置为10%的宽度和10%的高度将最终得到一个div的尺寸为10px x 10px(因为这是父元素大小的10%)。

确保父div的大小是你想要的。最好的方法是使用浏览器内置的开发人员工具。

Answer 3

'%'需要一个位置:try this

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

Answer 4

如果你想使用%作为宽度和高度。首先你需要用px.

添加一个外部div

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

外部div的高度为1920px，宽度为1440px，所以div-test，(你的红色方块)div的高度为192px，宽度为144px