如何防止 div 离开屏幕？

Question

现在我有一个 div，我需要宽度超过 100vw 才能获得我想要的效果。我不希望 div 离开屏幕的右侧。我希望视图保持在 100vw，没有水平滚动条。我试过 overflow: hidden; 和 overflow-x:hidden; 但它不起作用。

CSS

 .stripe {
    height: 500px;
    width: 150vw;
    top: 350px;
    margin-left: -30vw;
    position: absolute;
    background-color: #4775de;
    transform: rotate(6.2deg);
    z-index: -1;
}

HTML

 <div styleName='hero'>

   <div>
        <div styleName="stripe"/>
   </div>
    <div className="container" styleName="divide-container">
       <div styleName="upper-wrapper" >
       </div>
       <div styleName="lower-wrapper" >
            <MainButtonRow/>
       </div>
    </div>
</div>

原文由 Bill Sheng 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试添加另一个 div 来包装条纹 div。并给出溢出：隐藏。请参考下面的代码。

CSS

 .wrap{position:relative;
    width:100%;
    height:500px;
    overflow:hidden;
}

HTML

 <div styleName='hero'>

   <div className="wrap>
        <div styleName="stripe"/>
   </div>
    <div className="container" styleName="divide-container">
       <div styleName="upper-wrapper" >
       </div>
       <div styleName="lower-wrapper" >
            <MainButtonRow/>
       </div>
    </div>
</div>

原文由 VvV 发布，翻译遵循 CC BY-SA 4.0 许可协议