javascript - 无法定义响应式 div 的宽度

Question

我很难解释我的意思，但请耐心等待。首先这是我的 fiddle https://jsfiddle.net/jmajnqej/20/

#freelancewrapper {
width: calc(100% - 238px);
height: 440px;
background-color: #9D9D9D;
position: absolute;
right: 0;
}

我正在尝试让位于 .contentwrapper 内部的 #freelancwrapper 紧贴 .contentwrapper 的左侧，但同时具有更大的宽度，可以延伸到触及视口(viewport)的右侧。

(注意: fiddle 目前适用于大约 1400-1500 像素的视口(viewport)宽度，但尺寸大于 freelancewrapper 比父 div 延伸得更宽)。

如果这里有混淆希望我的图片进一步解释。 http://imgur.com/a/IrO5o (两种不同的屏幕尺寸)。

非常感谢任何输入。

Answer 1

好吧，这可以用不同的方式来处理。 position:absolute 一开始似乎是一个很好的解决方案，但它需要大量维护，因为它会使元素在布局中失去空间并且边距不会与其他元素折叠。

为了简化事情，让我们从基础开始。考虑以下示例:

html, body {margin: 0;padding: 0;}

div {
  background:blue;
  height:100px;
  width:100px;
}

div div {
  background:red;
  height:50px;
  width:200px;
  color:#FFF;
}

<div>
  <div>200px wide red div</div>
</div>
100px wide blue div

如您所见，默认情况下，大于其父级/容器的元素是可见的。

现在，根据我的理解，您希望将红色 div 扩展到屏幕右侧，同时确保解决方案具有响应性。在这种情况下，我们真正需要做的是计算元素的键(在本例中为蓝色容器)与视口(viewport)侧之间的距离。

通常开发人员会求助于 javascript 来进行这些计算，然而，现代 CSS3 使我们能够使用带有 vw/vh 的 calc() 表达式来本地执行此操作 视口(viewport)单位。

为将元素扩展到视口(viewport)侧计算的填充

此方法要求展开的 div 的宽度为 100%。请注意，这个扩展的 div 的内容不会超出父级的宽度。但是，背景将按预期工作。

padding-right: calc((100vw - 100%) / 2);

100vw 是视口(viewport)，100% 是父级的宽度(或最大宽度)除以 2 将得到元素和视口(viewport)之间的空间(一边)

html, body {margin: 0;padding: 0; max-width:100%; overflow-x:hidden;} /* makes sure to prevent horizontal scrollbar */

.container {
  width:100px;
  background:blue;
  height:200px;
  margin:0 auto;
}

.expanded {
  color:#FFF;
  height:100px;
  background:red;
  width:100%; /* required for method to work */
  padding-right: calc((100vw - 100%) / 2);
}

<div class="container">
  <div class="expanded">I expand to the right side of viewport</div>
</div>

另外值得一提的是，我已经将 overflow-x:hidden 和 max-width:100% 应用于 body 标签，以确保浏览器不会显示滚动条，如果计算未四舍五入(为了保持一致性)。

---

这种方法很好，因为:

• 不破坏布局
• 响应式(甚至适用于父级的最小/最大宽度)
• 简单的代码

需要考虑的缺点:

• 支持 CSS calc()
• 支持视口(viewport)单位
• 支持视口(viewport)单位计算(不适用于旧的 Safari 浏览器)
• 没有右填充(可以通过将其他元素包裹在另一个div中来解决)

---

最后，这里有一个简单的演示，显示了使用您在图像中提供的布局的效果: view on jsFiddle

body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.wrapper {
  width: 86%;
  max-width: 1350px;
  margin: 0 auto;
  background: #EEE;
  position: relative;
}

.contentwrapper {
  height: 300px;
  
  /* another method based on width instead of right padding */
  /* width: 93vw; */
  /* max-width: calc(1350px + ((100vw - 1350px) / 2)); */
  
  width:100%;
  padding-right: calc((100vw - 100%) / 2);
}

/* ---------------------------- */
/* demo styling
/* ---------------------------- */

html,
body {
  background: #FFF;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.contentwrapper {
  background: #7f6e60 url(http://i.imgur.com/yKbPM43.jpg) no-repeat;
  background-size: cover;
  margin-bottom:30px;
}

.content { padding: 1em; }

#freelancewrapper {
  color:#FFF;
  padding:1em 2em;
  height: 100%;
  position: relative;
}

#freelancewrapper p {
  background: rgba(255, 0, 45, 0.58);
  width:60%;
  height:60%;
  padding:1em;
  font-weight: bold;
  position: absolute;
  bottom: -20px;
  overflow: hidden;
}

<!-- main wrapper -->
<div class='wrapper'>

  <!-- some content at top -->
  <div class="content">
    <h3>Content above expanded div</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nam ut incidunt odit ea blanditiis dicta alias, eaque iusto! Voluptatem eveniet modi dignissimos praesentium adipisci quibusdam laudantium ex ut fugiat.</p>
  </div>
  
  <!-- div that expands to end of viewport (right side) -->
  <div class='contentwrapper'>
    <section id='freelancewrapper'>
      <h1>Why hire a freelance designer?</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, hic inventore sunt harum nesciunt voluptatem deserunt assumenda tenetur. Explicabo, eligendi ipsum laboriosam porro nisi quos, qui, adipisci id veritatis necessitatibus ducimus dignissimos maiores nobis voluptates perspiciatis vero? Laborum fugiat itaque placeat, voluptatibus. Repellendus fuga, vel alias eos molestias.</p>
    </section>
  </div>
  
  <!-- more content below -->
  <div class="content">
    <h3>Content below expanded div</h3>
    <p>Temporibus possimus illo quis provident, illum perferendis maxime fugit tempora rem incidunt earum amet vitae atque est alias dolores totam architecto voluptatem voluptate, officiis deleniti enim accusantium laborum error. Fugiat.</p>
  </div>
  
</div>