2020年1月7日 00:24:55go评论69阅读模式

英文:

CSS When setting parent width to 0 on mobile, children overflow

问题

我有一个联系部分，通过将父级的宽度从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;
}
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%;
}
</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;'>点击我</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;'>
联系我们
</p>
<label>姓名</label>
<input id='name' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>姓氏</label>
<input id='surname' type='text' value=' '>
<br>
<label>电话</label>
<input id='phone' type='text' value=' ' style='margin-left:18px;'>
<br>
<label>电子邮件</label>
<input id='email' type='text' value=' ' style='margin-left:23px;'>
<br>
<label>公司</label>
<input id='company' type='text' value=' ' style='margin-left:-3px';
<br>
<label>地址</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;'>提交</div>

<span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>

</span>
</div>
</div>
</html>

英文:

I have a contact section that slides out by animating the width of the parent from 0 to 30%,

var contact_toggle = true;
$(&#39;#contactus&#39;).click(function(){
if(contact_toggle){
$(&#39;#contact_cont&#39;).animate({
width: &#39;30%&#39;
});
}else{
$(&#39;#contact_cont&#39;).animate({
width: &#39;0%&#39;
});
}
contact_toggle = !contact_toggle;
});

on desktop this works fine,

But on mobile the children, and children's children overflow to the right:

Here is a fiddle: https://jsfiddle.net/wolfiestew/pfvwezLu/

to see what I mean, switch on the responsiveness tester on chrome to horizontal iphone.

&lt;style&gt;
.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;
}
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%;
}
&lt;/style&gt;
&lt;script&gt;
var contact_toggle = true;
$(&#39;#contactus&#39;).click(function(){
if(contact_toggle){
$(&#39;#contact_cont&#39;).animate({
width: &#39;30%&#39;
});
}else{
$(&#39;#contact_cont&#39;).animate({
width: &#39;0%&#39;
});
}
contact_toggle = !contact_toggle;
});
}
&lt;/script&gt;
&lt;html&gt;
&lt;div id=&#39;contactus&#39;  style=&#39;background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;&#39;&gt;click me&lt;/div&gt;
&lt;div id=&#39;contact_cont&#39; style=&#39;position:absolute;top:0px;right:0px;background-color:rgb(31,32,41);width:0%;height:100%;z-index:10000;&#39;&gt;
&lt;div id=&#39;contact_container&#39; class=&#39;contact&#39;&gt;
&lt;p style=&#39;font-size:17pt;margin-left:30px;&#39;&gt;
Contact Us
&lt;/p&gt;
&lt;label&gt;Name&lt;/label&gt;
&lt;input id=&#39;name&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:23px;&#39;&gt;
&lt;br&gt;
&lt;label&gt;Surname&lt;/label&gt;
&lt;input id=&#39;surname&#39; type=&#39;text&#39; value=&#39; &#39;&gt;
&lt;br&gt;
&lt;label&gt;Phone&lt;/label&gt;
&lt;input id=&#39;phone&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:18px;&#39;&gt;
&lt;br&gt;
&lt;label&gt;Email&lt;/label&gt;
&lt;input id=&#39;email&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:23px;&#39;&gt;
&lt;br&gt;
&lt;label&gt;Company&lt;/label&gt;
&lt;input id=&#39;company&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:-3px&#39;;
&lt;br&gt;
&lt;label&gt;Address&lt;/label&gt;
&lt;input id=&#39;address&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:5px;&#39;&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div id=&#39;submit_details&#39; class=&#39;button&#39; style=&#39;position:relative;margin-left:10vw;margin-top:6vh;&#39;&gt;Submit&lt;/div&gt;
&lt;span id=&#39;contact_buttons&#39; class=&#39;contact_buttons&#39; style=&#39;margin:5vh auto;&#39;&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/html&gt;
</details>
# 答案1
**得分**: 1
将 `overflow-x: hidden` 添加到将 `width` 设置为 0 的元素。
<details>
<summary>英文:</summary>
Add `overflow-x: hidden` to the element whose `width` you set to 0.
</details>
# 答案2
**得分**: 1
以下是您提供的代码的翻译部分：
我会将联系部分设置为固定宽度，最大宽度为100vw（以确保不超过屏幕宽度），并简单地切换类，对我来说是`.active`，并使用`transform: translateX()`在不活动时将其推出屏幕。
```javascript
$('#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;'>
      联系我们
    </p>
    <label>姓名</label>
    <input id='name' type='text' value=' ' style='margin-left:23px;'>
    <br>
    <label>姓氏</label>
    <input id='surname' type='text' value=' '>
    <br>
    <label>电话</label>
    <input id='phone' type='text' value=' ' style='margin-left:18px;'>
    <br>
    <label>电子邮件</label>
    <input id='email' type='text' value=' ' style='margin-left:23px;'>
    <br>
    <label>公司</label>
    <input id='company' type='text' value=' ' style='margin-left:-3px;'> <br>
    <label>地址</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;'>提交</div>

    <span id='contact_buttons' class='contact_buttons' style='margin:5vh auto;'>

    </span>
  </div>
</div>

希望这有助于您理解代码和所需的更改。

英文:

I would make the contact section a fixed width with a max width of 100vw (to make sure its not wider than the screen) and simply toggle the class, in my case .active, and use transform:translateX() to push off the screen when not active.

$(&#39;#contactus&#39;).click(function() {
$(&quot;#contact_cont&quot;).toggleClass(&quot;active&quot;);
});

.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);
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&#39;contactus&#39; style=&#39;background-color:blue;position:absolute;left:5vh;bottom:5vh;width:50px;height:50px;z-index:100;&#39;&gt;click me&lt;/div&gt;
&lt;div id=&#39;contact_cont&#39;&gt;
&lt;div id=&#39;contact_container&#39; class=&#39;contact&#39;&gt;
&lt;p style=&#39;font-size:17pt;margin-left:30px;&#39;&gt;
Contact Us
&lt;/p&gt;
&lt;label&gt;Name&lt;/label&gt;
&lt;input id=&#39;name&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:23px;&#39;&gt;
&lt;br&gt;
&lt;label&gt;Surname&lt;/label&gt;
&lt;input id=&#39;surname&#39; type=&#39;text&#39; value=&#39; &#39;&gt;
&lt;br&gt;
&lt;label&gt;Phone&lt;/label&gt;
&lt;input id=&#39;phone&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:18px;&#39;&gt;
&lt;br&gt;
&lt;label&gt;Email&lt;/label&gt;
&lt;input id=&#39;email&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:23px;&#39;&gt;
&lt;br&gt;
&lt;label&gt;Company&lt;/label&gt;
&lt;input id=&#39;company&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:-3px;&#39;&gt; &lt;br&gt;
&lt;label&gt;Address&lt;/label&gt;
&lt;input id=&#39;address&#39; type=&#39;text&#39; value=&#39; &#39; style=&#39;margin-left:5px;&#39;&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div id=&#39;submit_details&#39; class=&#39;button&#39; style=&#39;position:relative;margin-left:10vw;margin-top:6vh;&#39;&gt;Submit&lt;/div&gt;
&lt;span id=&#39;contact_buttons&#39; class=&#39;contact_buttons&#39; style=&#39;margin:5vh auto;&#39;&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;

You should also consider taking the margin-left off of the inputs. Maybe wrap the label and input together and use flexbox for alignment.

答案3

得分: -1

找到唯一有效的方法是，谢谢！

 $(&quot;#contact_cont&quot;).css(&#39;display&#39;,&#39;hidden&#39;);
var contact_toggle = true;
$(&#39;#contactus&#39;).click(function(){
 if(contact_toggle){
  $(&quot;#contact_cont&quot;).css(&#39;display&#39;,&#39;inline&#39;);
 $(&quot;#contact_cont&quot;).css(&#39;width&#39;,&#39;0px&#39;);
  $(&quot;#contact_cont&quot;).animate({width:&#39;30%&#39;});
  }else{
   $(&quot;#contact_cont&quot;).css(&#39;width&#39;,&#39;30%&#39;);
  $(&quot;#contact_cont&quot;).animate({width:&#39;0px&#39;});
    $(&quot;#contact_cont&quot;).css(&#39;display&#39;,&#39;hidden&#39;);
  }
  contact_toggle = !contact_toggle;
});

英文:

Found the only thing that worked was, thanks though!

 $(&quot;#contact_cont&quot;).css(&#39;display&#39;,&#39;hidden&#39;);
var contact_toggle = true;
$(&#39;#contactus&#39;).click(function(){
if(contact_toggle){
$(&quot;#contact_cont&quot;).css(&#39;display&#39;,&#39;inline&#39;);
$(&quot;#contact_cont&quot;).css(&#39;width&#39;,&#39;0px&#39;);
$(&quot;#contact_cont&quot;).animate({width:&#39;30%&#39;});
}else{
$(&quot;#contact_cont&quot;).css(&#39;width&#39;,&#39;30%&#39;);
$(&quot;#contact_cont&quot;).animate({width:&#39;0px&#39;});
$(&quot;#contact_cont&quot;).css(&#39;display&#39;,&#39;hidden&#39;);
}
contact_toggle = !contact_toggle;
});

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

CSS在移动设备上将父元素宽度设置为0时，子元素溢出

问题

答案3

如何使用原生HTML/CSS检测滑块的点击。

当页面处于最小视口尺寸时，我如何包装图像？

如何从表格中读取图像，并在按钮单击时在弹出窗口中以全尺寸显示？

如何在TailwindCSS中为所有元素添加“focus-visible”？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论