Question

我将无法解释我的意思，但要忍受我。首先，这是我的小提琴https://jsfiddle.net/jmajnqej/20/

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

我正在尝试使用位于.contentwrapper内部的#freelancwrapper来拥抱.contentwrapper的左边但同时有更大的宽度延伸到触摸视口的右侧。

（注意：小提琴目前适用于大约1400-1500px视口宽度，但尺寸大于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扩展到屏幕右侧，同时确保解决方案具有响应性。在这种情况下，我们真正需要做的是计算元素键（在本例中为蓝色容器）和视口侧之间的距离。

通常开发人员会使用javascript来进行这些计算，但是，现代CSS3使我们能够使用calc()表达式vw / vh视口单元本地执行此操作。

用于将元素扩展到视口端的计算填充

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

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

100vw是视口，100%是父级的宽度（或最大宽度）除以2将导致元素和视口之间的空间（一侧）

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()
支持视口单元
支持视口单元计算（对旧的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>

Answer 2

如果要求水平延伸.freelancewrapper以填充视口，请尝试将width设置为calc(100% - 174px)，overflow设置为hidden，text-overflow为ellipsis，right至calc(47px)以保持视口右侧的边距

  #freelancewrapper {
    right:calc(47px);
    width: calc(100% - 174px);
    min-width:calc(47px);
    max-width: 1000px;
    height: 440px;
    background-color: #9D9D9D;
    position: absolute;
    overflow:hidden;
    text-overflow:ellipsis;
  }

jsfiddle https://jsfiddle.net/jmajnqej/15/

Answer 3

我不确定我是否确切地提出了你的问题：但是如果你只想把#freelancewrapper放到右边，你需要做这样的事情：

#freelancewrapper {
    width: 100%;
    max-width: 1000px;
    height: 440px;
    background-color: #9D9D9D;
    position: absolute;
    right: 0; // this should do it
}

无法定义响应div

3 个答案:

用于将元素扩展到视口端的计算填充