如何摆脱对角线全屏布局中的水平滚动条？

如何摆脱溢出水平滚动条？我有两个使用CSS3的对角线形状。我已经尝试了一切权利，但没有任何作品。我甚至把溢出：隐藏。如何摆脱对角线全屏布局中的水平滚动条？

有没有一种方法可以调整div .right，因此它不会出现水平滚动条？

我确定这是一个noob错误，但我需要另一双眼睛。

.row { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.left{ 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #ff9a00; 
 
    position: absolute; 
 
    display: block; 
 
    left: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
} 
 

 
.right { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    display: block; 
 
    right: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
    overflow: hidden; 
 
}

<div class="dual-screen"> 
 
     <div class="row"> 
 
     <div class="left"></div> 
 
     <div class="right"></div> 
 
     </div> 
 
    </div>

来源

2017-09-01 PandaNinja

也许你应用溢出：隐藏到错误的元素，请尝试将溢出规则应用于class =“row”的div。溢出应该应用于您想隐藏孩子溢出的容器。 –

谢谢你的回应。 – PandaNinja

所有你要找的是overflow-x: hidden添加到您的包含的元素之一。
此元素必须至少有一个以上从.dual-screen。

overflow-x控制水平溢出。
将其设置为hidden会隐藏此溢出，因此滚动条不可见。

在下面的例子中，我将其添加到<body>：

body { 
 
    overflow-x: hidden; 
 
} 
 

 
.row { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 

 
.left { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: #ff9a00; 
 
    position: absolute; 
 
    display: block; 
 
    left: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
} 
 

 
.right { 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    display: block; 
 
    right: -50%; 
 
    z-index: 3; 
 
    transform: skew(-45deg); 
 
    -o-transform: skew(-45deg); 
 
    -moz-transform: skew(-45deg); 
 
    -webkit-transform: skew(-45deg); 
 
    overflow: hidden; 
 
}

<div class="dual-screen"> 
 
    <div class="row"> 
 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>

希望这有助于！ :)

来源

2017-09-01 03:09:38

谢谢你的回应！放置overflow-x：隐藏;在身体修复它，但我希望我可以调整。正确的div类，以防止它戳出来。有没有办法做到这一点？ – PandaNinja

不幸的不是。像这样的“角度”元素的一般概念是允许他们戳出，然后在父级上使用“overflow：hidden”来掩盖它。 –

织补。好吧，这是有道理的。谢谢你指出。我学到了东西。 – PandaNinja

如何摆脱对角线全屏布局中的水平滚动条？

回答

相关问题