CSS在移动设备上将父宽度设置为0时，子溢出
Posted
技术标签:
【中文标题】CSS在移动设备上将父宽度设置为0时，子溢出【英文标题】：CSS When setting parent width to 0 on mobile, children overflow 【发布时间】：2020-04-24 04:50:20 【问题描述】：我有一个联系人部分，它通过将父级的宽度从 0% 设置为 30% 来滑出，
var contact_toggle = true;
$('#contactus').click(function()
if(contact_toggle)
$('#contact_cont').animate(
width: '30%'
);
else
$('#contact_cont').animate(
width: '0%'
);
contact_toggle = !contact_toggle;
);
在桌面上这工作正常，
但在移动设备上，孩子们，孩子们的孩子们向右溢出：
这是一个小提琴：https://jsfiddle.net/wolfiestew/pfvwezLu/
要明白我的意思，打开 chrome 上的响应测试器到水平 iphone。
<style>
.contact
position:absolute;
z-index: 10000;
margin-top:2%;
overflow-x:hidden;
.contact input
border: 2px solid #dadada;
color: white;
height:30px;
border-radius:7px;
margin-bottom: 5vh;
color: white;
width:200px;
font-size:9pt;
font-family:roboto;
background-color:rgb(20,21,26);
.contact label
margin-right: 10px;
font-family:roboto;
margin-left:1vw;
color: white;
bodyoverflow:hidden;
.contact input:focus
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
.contact_buttons
bottom: 1vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width:100%;
</style>
<script>
var contact_toggle = true;
$('#contactus').click(function()
if(contact_toggle)
$('#contact_cont').animate(
width: '30%'
);
else
$('#contact_cont').animate(
width: '0%'
);
contact_toggle = !contact_toggle;
);
</script>
<html>
<div id='contactus' style='background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;'>click me</div>
<div id='contact_cont' style='position:absolute;top:0px;right:0px;background-color:rgb(31,32,41);width:0%;height:100%;z-index:10000;'>
<div id='contact_container' class='contact'>
<p style='font-size:17pt;margin-left:30px;'>
Contact Us
</p>
<label>Name</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Surname</label>
<input id='surname' type='text' value=' '>
<br>
<label>Phone</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>Email</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Company</label>
<input id='company' type='text' value=' ' style='margin-left:-3px';
<br>
<label>Address</label>
<input id='address' type='text' value=' ' style='margin-left:5px;'>
<br>
<br>
<div id='submit_details' class='button' style='position:relative;margin-left:10vw;margin-top:6vh;'>Submit</div>
<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>
</span>
</div>
</div>
</html>
【问题讨论】：
我建议编辑您的问题以显示更多代码并更好地解释“向右溢出”的含义 - 例如联系表单会导致页面宽度为 130% 还是您只是在谈论子元素本身的布局？您尝试实现的目标的小提琴和模型也将非常有帮助。 jsfiddle.net/wolfiestew/pfvwezLu 您需要在此处在您的问题中发布minimal reproducible example，而不是指向您的网站或任何第三方网站的链接。 您的#company 输入元素缺少右括号
【参考方案1】：
将overflow-x: hidden 添加到您将width 设置为0 的元素。
【讨论】：
还是同样的问题【参考方案2】：我会将接触部分设置为固定宽度，最大宽度为 100vw（以确保其不比屏幕宽）并简单地切换类，在我的情况下为 .active，并使用 transform:translateX() 推开不活动时的屏幕。
$('#contactus').click(function()
$("#contact_cont").toggleClass("active");
);.contact
position: absolute;
z-index: 10000;
margin-top: 2%;
.contact input
border: 2px solid #dadada;
color: white;
height: 30px;
border-radius: 7px;
margin-bottom: 5vh;
color: white;
width: 200px;
font-size: 9pt;
font-family: roboto;
background-color: rgb(20, 21, 26);
.contact label
margin-right: 10px;
font-family: roboto;
margin-left: 1vw;
color: white;
body
overflow: hidden;
.contact input:focus
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
.contact_buttons
bottom: 1vh;
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
#contact_cont
position: absolute;
top: 0px;
right: 0px;
background-color: rgb(31, 32, 41);
width: 320px;
max-width: 100vw;
height: 100%;
z-index: 10000;
transform: translateX(100%);
transition: 250ms;
overflow: auto;
#contact_cont.active
transform: translateX(0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='contactus' style='background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;'>click me</div>
<div id='contact_cont'>
<div id='contact_container' class='contact'>
<p style='font-size:17pt;margin-left:30px;'>
Contact Us
</p>
<label>Name</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Surname</label>
<input id='surname' type='text' value=' '>
<br>
<label>Phone</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>Email</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>Company</label>
<input id='company' type='text' value=' ' style='margin-left:-3px;'> <br>
<label>Address</label>
<input id='address' type='text' value=' ' style='margin-left:5px;'>
<br>
<br>
<div id='submit_details' class='button' style='position:relative;margin-left:10vw;margin-top:6vh;'>Submit</div>
<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>
</span>
</div>
</div>您还应该考虑将margin-left 从输入中删除。也许将标签和输入包装在一起并使用 flexbox 进行对齐。
【讨论】：
【参考方案3】：发现唯一有效的是，不过谢谢！
$("#contact_cont").css('display','hidden');
var contact_toggle = true;
$('#contactus').click(function()
if(contact_toggle)
$("#contact_cont").css('display','inline');
$("#contact_cont").css('width','0px');
$("#contact_cont").animate(width:'30%');
else
$("#contact_cont").css('width','30%');
$("#contact_cont").animate(width:'0px');
$("#contact_cont").css('display','hidden');
contact_toggle = !contact_toggle;
);
【讨论】：
以上是关于CSS在移动设备上将父宽度设置为0时，子溢出的主要内容，如果未能解决你的问题，请参考以下文章