gpt4 book ai didi

javascript - 流体填充?无法使用高度或宽度

转载 作者:太空宇宙 更新时间:2023-11-03 22:46:43 24 4
gpt4 key购买 nike

我正在修改用于上传文件的 html 表单 输入(输入类型"file"),但由于某些原因我无法修改高度 和此元素的 宽度 以使其 100% 占据网页(流畅)。

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

我正在为此寻找解决方案,我高度怀疑这个问题是否会得到解决,我期待答案说它无法完成,但询问也没有坏处。

我的 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;
}

提前致谢。

最佳答案

这是出了名的困难,不建议为 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>

关于javascript - 流体填充?无法使用高度或宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41603713/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com