流体填充？无法使用高度或宽度

Question

我正在修改用于上传文件的 html form 输入（输入类型"file"），但由于某些原因我无法修改 [=该元素的 27=]height & width 使其 100% 占据网页 (fluid)。

我找到了使用元素填充的高度和宽度的替代方法。使用 padding 的缺点是我不能让它像这样流动，因为当我使用 100% 时它大于设备视口。但如果我将它更改为大约 50%，它仍然大于设备视口。

我正在为此寻找解决方案，我非常怀疑这个问题是否会得到解决，我期待答案说它无法完成，但对问.

我的Html:

<!DOCTYPE html>
<html>

<head>   
<link href="master.css" type="text/css" rel="stylesheet" />
</head>

<body>

<form action="upload.php" method="post">
<input id="form" type="file" onchange="this.form.submit()" name="myFile"/>
</form>

</body>


</html>

CSS:

html, body {
    padding: 0px;
    margin: 0px;
    background-color: red;
    height: 100%;
    width: 100%;
}

#form {
    padding-top: 50%; 
    box-sizing: border-box; 
    background-color: green;
}

提前致谢。

Answer 1

这是出了名的困难，不建议设置 input 字段的样式。相反，创建一个 label 并使用 for 属性将其附加到 input，并将 label 样式改为

html, body {
    padding: 0px;
    margin: 0px;
    background-color: red;
    height: 100%;
    width: 100%;
}

form,label {
  height: 100%;
}

#form {
  padding-top: 50%; 
  box-sizing: border-box; 
  background-color: green;
  display: none;
}

label {
  width: 100px;
  background: blue;
  display: block;
  color: #fff;
}

<form action="upload.php" method="post">
  <label for="form"></label>
  <input id="form" type="file" onchange="this.form.submit()" name="myFile"/>
</form>

流体填充？无法使用高度或宽度

Fluid padding? Unable to use height or width

html

javascript

css

forms