Trouble defining width of a responsive div

问题

I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/20/

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

I'm trying to get #freelancwrapper which is positioned inside .contentwrapper to hug the left of the .contentwrapper but at the same time have a greater width which extends to touch the right side of the viewport.

(note: the fiddle currently works for roughly under 1400-1500px viewport width but at sizes larger than that the freelancewrapper extends wider than the parent div).

If there is confusing here hopefully my pictures further explain. http://imgur.com/a/IrO5o (two different screen sizes).

Any input is much appreciated.

回答1:

Well, this could be approached differently. position:absolute seemed like a good solution at the start but it requires a lot of maintenance because it makes the element lose its space in the layout and the margins do not collapse with others.

To simplify things, let's go to the basics. Consider the following sample:

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

As you can see, elements which are bigger than their parent/container are visible by default.

Now from my understanding, you wish to expand the red div to the right side of the screen while making sure the solution is responsive. In this case, what we really need to do is calculate the distance between our element's bonds (in this example, the blue container) and the viewport side.

Usually developers would resort to javascript to make these calculations, however, modern CSS3 enables us to do this natively using calc() expression with vw / vh viewport units.

Calculated padding for expanding element to viewport side

This method requires that the expanded div get a width of 100%. Please note that the content of this expanded div will not go outside the width of the parent. However, backgrounds will work as expected.

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

100vw is the viewport, 100% is the parent's width (or max-width) divided by 2 will result in the space between the element and the viewport (one side)

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>

Also worth mentioning that I have applied overflow-x:hidden and max-width:100% to the body tag to make sure browsers do not show scrollbars if the calculation was not rounded (for consistency).

This method is good because:

Does not break layout
Responsive (even works with min/max width of parent)
Simple code

Drawbacks to consider:

Support for CSS calc()
Support for viewport units
Support for viewport unit calculations (does not work for old Safari browsers)
No right padding (can be solved by wrapping other elements in another div)

And finally, here is a simple demo that shows the effect using the layout you have provided in the images: 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>

回答2:

If requirement is to stretch .freelancewrapper horizontally to fill viewport , try setting width to calc(100% - 174px) , overflow to hidden , text-overflow to ellipsis , right to calc(47px) to maintain margin at right side of viewport

  #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/

回答3:

I am not sure if I got your question exactly: but if you just want to stick the #freelancewrapper to the right you need to do something like this:

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

来源：https://stackoverflow.com/questions/35469835/trouble-defining-width-of-a-responsive-div

标签

javascript

jquery

html

css

responsive-design