body标签不会占用所有窗口宽度+ 1600px

Question

我有一个应该仅显示一半的div（出于设计目的），该div适用于屏幕<1200 px的屏幕，但是当我进入大屏幕时，我的div完全显示了，这是因为主体没有覆盖整个屏幕

我试图使max-width和width：100％达到身体，但没有成功，我遇到了同样的问题

这是div样式

.testimonials .right-effect{
   border-radius: 81px;
   background-color: #0be881;
   width: 227px;
   height: 152px;
   transform: rotate(-56deg);
   right: -120px;
   bottom: 0;
 }

和身体样式

body{margin:0}

这是问题的图片，蓝色部分是主体，绿色部分是我的div

Answer 1

Use the CSS3 Viewport-percentage feature.（vw）和Calc

通过这种方式，您可以像left: calc(50% - 120px + 50vw);

50% - 120px将使元素居中（我假设120px是元素的一半宽度）；

{+ 50vw将元素向右移动（- 50vw将向左移动；

别忘了您的元素必须为position: absolute或position: relative;（相对于正文或其他居中元素）才能起作用。

Answer 2

谢谢你， 我找到了解决方案，只是我需要隐藏body元素中的溢出

body{margin:0;overflow-x:hidden;}