固定 div 为 100% 高度的实心

Question

I'm trying to go with the css-only approach to this issue and not to use margin-left to move the <div class="fd"></div> from <div class="sb"></div> I've ran out of the idea-fuel what to try. I've nested some wrappers and used different kinds of positionings (this is not a typo nor French, spell-checker excuse me) but nothing has worked out so far.

Issue: Making a fixed div as solid element, to accept the .fd element on it's right side.

.fd holds content which is going to exceed the height of the page.
.sb holds side-content which is going to remain as 100% in height.

See snippet for a clear example what I've been struggling with.

 * { margin: 0; padding: 0; box-sizing: border-box; } .sb { height: 100%; width: 300px; background: blue; position: fixed; opacity: 0.5; } .fd { min-height: 100%; background-color: red; display: inline; /* Won't apply to fixed? block will overlap everything */ }

 <div class="sb"></div> <div class="fd"> <p>Am I out in the open?</p> </div>

Answer 1

Added an extra .wrap .

 * { margin: 0; padding: 0; box-sizing: border-box; } .wrap{ padding-left: 300px; } .sb { height: 100%; width: 300px; background: blue; margin-left: -300px; position: fixed; opacity: 0.5; } .fd { min-height: 100%; background-color: red; display: inline; /* Won't apply to fixed? block will overlap everything */ }

 <div class="wrap" id="wrap"> <div class="sb"></div> <div class="fd"> <p>Am I out in the open?</p> </div> </div>

https://jsfiddle.net/afelixj/tb3pbam9/