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

Question

我有一个应该只显示一半的 div(设计目的)，该 div 在 < 1200 像素的屏幕上工作正常，但是当我进入大屏幕时，我的 div 完全显示了，因为 body 没有覆盖所有屏幕

我尝试将 max-width 和 width:100% 设置为 body 但没有成功，我遇到了同样的问题

这是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

_{(来源:gulfupload.com)}

Answer 1

Use the CSS3 Viewport-percentage feature. (大众) 和 Calc

这样你就可以像 left: calc(50% - 120px + 50vw);

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

+ 50vw 将元素向右移动(- 50vw 将向左移动)；

不要忘记您的元素必须是 position: absolute 或 position: relative;(相对于 body 或任何其他居中元素)才能起作用。