如何使固定定位的 div 使用其父级的 rest 宽度？

Question

I have 2 columns in a container (whose width dynamically changes in our situation). The left-column (green) has always a fix width of ie 100px, and flows with the document as usual. The right column (blue) has a position: fixed , because i have a JS code, which sets the top&bottom positions of this right column dependent on the scroll position.

I want that my fixed positioned right column does not expand its parent on the X axis, but just use the space left from the left-column . Is it possible?

Now i have width:inherit, which actually makes the whole right-column having the same width as its parent. But i have to substract the width of the left-column from this width, so that the right-column does not expand the container.

Here is a fiddle for a simplified version of my problem:

http://jsfiddle.net/gj4a5hde/

 .container { margin-top: 30px; height: 1400px; width: 600px; background-color: lightgray; border: 2px solid black; }.left-column { height: 1200px; width: 100px; background-color: green; }.right-column { position: fixed; top: 50px; margin-left: 110px; /* always fix, since the width of the left-column does not change */ height: 200px; width: inherit; max-width: inherit; background-color: blue; }

 <div class="container"> <div class="left-column"></div> <div class="right-column"></div> </div>

Answer 1

Set the parent .container to have transform: translate(0,0) . This will make the fixed element "fixed" to the parent instead of the viewport. Then use calc(100% - 110px) to set the width of your fixed element. That will take the margin into account and remove it from the overall width of the fixed element.

You will need to adjust the top value to what you want.

 .container { margin-top: 30px; height: 1400px; width: 600px; background-color: lightgray; border: 2px solid black; transform: translate(0,0); }.left-column { height: 1200px; width: 100px; background-color: green; }.right-column { position: fixed; top: 50px; margin-left: 110px; /* always fix, since the width of the left-column does not change */ height: 200px; width: calc(100% - 110px); max-width: inherit; background-color: blue; }

 <div class="container"> <div class="left-column"></div> <div class="right-column"></div> </div>