Javascript 包含固定元素的页面，是否填充了其他元素？

我想用一些固定居中的元素构建一个页面，这些元素被填充所有可用空间的元素包围（取决于浏览器的宽度）

下面是一个线框来说明：

CSS3，JS。。。有办法吗

谢谢你的帮助

解决方案#1 我认为未来解决这一问题的方法将取决于

查看IE10+ CSS排除扩展了内容包装的概念 仅限于浮动。。。元素在其内容区域中布局其内联内容，并在其关联的换行上下文中环绕排除区域（--摘录自）

这也解释了例外情况

…web作者现在可以包装文本，使其完全围绕 元素，从而避免了浮动的传统限制。 而不是限制元素向左或向右浮动 相对于它们在文档流中的位置，CSS排除可以是 位于距顶部、底部、左侧或右侧的指定距离处 包含块的右侧，而包含块的其余部分 文件流

具有讽刺意味的是，到目前为止，这只适用于IE10（寻找包裹流：两者都适用）

这是代码的样子：

<div class="container">
    <div class="exclusion1"></div>
    <div class="exclusion2"></div>
    <div class="dummy_text">
       text here
    </div>
</div> 

解决方案#2 CSS技巧文章应该会有所帮助

加成

---

也许这个库会有所帮助：CSS排除是一个完美的解决方案，可惜现在只有IE10支持它。。。第二个解决方案是一个很好的技巧，但是是否可以在图片的顶部添加文本（而不仅仅是左侧和底部）？

.exclusion1,  .exclusion2
{
    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    z-index: 1;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    margin: auto;
}
.exclusion1
{
    width: 150px;
    height: 150px;
    background: yellow;
}
.exclusion2
{
    width: 250px;
    height: 50px;
    background: blue;
    margin-top: 320px;
}

<div id="page-wrap">    
    <img src="http://placekitten.com/250/250" id="logo">

    <div id="l">
        <p>left column text</p>
    </div>

    <div id="r">
        <p>right column text</p>
    </div>
 </div>

#logo {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l, #r {
    width: 49%;
}
#l:before, #r:before {
    content: "";
    width: 125px;
    height: 250px;
}
#l {
    float: left;
}
#l:before {
    float: right;
}

#r {
    float: right;
}
#r:before {
    float: left;
}