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

我修改html form输入上传文件（输入型“文件”），但由于某些原因，我无法修改高度 & 宽度这个元素，使之100％的网页（流体）。流体填料？无法使用高度或宽度

我发现了一个替代方法，使用宽度为&的宽度，它使用元素填充。使用填充的缺点是我不能使它像这样流动，因为当我使用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; 
}

在此先感谢。

来源

2017-01-12 Jake

这是非常困难的，不建议风格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>

来源

2017-01-12 01:39:26

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

回答

相关问题