液体パッディング？高さまたは幅

を使用することができません私は、ファイルに（入力タイプ「ファイル」）をアップロードするための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

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>

を labelを作成し、 for属性を使用して inputに添付し、スタイル

出典

2017-01-12 01:39:26

液体パッディング？高さまたは幅

答えて

関連する問題