将 div 从容器扩展到视口的右边缘

Question

我有一个居中的容器 div，我有 2 个 div，一个向左浮动，一个向右浮动。在右侧浮动中，我有一个 child div，我想将其扩展到视口的右边缘。

我已经尝试了从 cal 到 vw 选项的大量方法，但找不到一个好的解决方案来执行此操作。理想情况下，我更喜欢一种不那么骇人听闻的方法，因为我希望它在移动设备（iOS 等）上运行良好。这是我目前的代码：

代码

body {
  background: #FFF;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1360px;
}

.left {
  background: #0095ff;
  float: left;
  width: 32.35294%;
  height: 100px;
}

.right {
  float: right;
  width: 66.17647%;
  background: #F1F1F1;
  height: 100px;
}

.right .stretch {
  background: #ff8227;
  height: 50px;
}

.clear {
  clear: both;
  font-size: 0px;
  line-height: 0px;
  display: block;
}

<div class="container">
  <div class="left">left</div>
  <div class="right">
    <div class="stretch">right</div>
  </div>

  <div class="clear"></div>
</div>

这是一个有效的 jsFiddle：https://jsfiddle.net/ecr10ago/1/

这里有一张图片来说明。它是我试图扩展的浅橙色位。

Answer 1

如果您不介意在主体上隐藏水平溢出，下面我的解决方案应该可以满足您的需要。

我使 .stretch 绝对定位，相对于它的父 .right，我能够达到效果。

我无法做到的是找到一个将其放置在视口右边缘的解决方案，所以我使用了一个固定值，并将水平溢出隐藏在 body 上。

body {
  background: #FFF;
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1360px;
}

.left {
  background: #0095ff;
  float: left;
  width: 32.35294%;
  height: 100px;
}

.right {
  float: right;
  width: 66.17647%;
  background: #F1F1F1;
  height: 100px;
  position: relative;
}

.right .stretch {
  background: #ff8227;
  height: 50px;
  position: absolute;
  right: -2000px;
  left: 0;
}


.clear {
  clear: both;
  font-size: 0px;
  line-height: 0px;
  display: block;
 }

<div class="container">
    <div class="left">left</div>
    <div class="right">
        <div class="stretch">right</div>
    </div>
    
    <div class="clear"></div>
</div>

将 div 从容器扩展到视口的右边缘

Expanding div from container to the right edge of viewport

html

css

responsive-design