流體填料？無法使用高度或寬度

我修改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

流體填料？無法使用高度或寬度

回答

相關問題