具有固定元素的页面并填充其他页面？

Question

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

这是一个线框来说明它：http://s23.postimg.org/pm61hyam3/Sans_titre_6.jpg

CSS3，JS ......有没有办法做到这一点？

感谢您的帮助！

Answer 1

解决方案＃1

我认为如何解决这个问题的未来方式将是CSS Exclusions。

在IE10 +

中查看this fiddle

  

CSS排除扩展了之前内容包装的概念   仅限于花车。 ...元素在其内容区域中布置其内联内容，并在其关联的包装上下文中包围排除区域（ - 摘自the spec）

此msdn article也解释了排除

  

...网络作者现在可以将文字换行以便完全包围   元素，从而避免浮动的传统限制。   而不是限制元素向左或向右浮动   相对于它们在文档流中的位置，CSS Exclusions可以   位于距离顶部，底部，左侧或者顶部的指定距离处   包含块的右侧，而剩余的一部分   文件流程。

具有讽刺意味的是，到目前为止，这仅适用于IE10（查找wrap-flow：here）

这就是代码的样子：

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

CSS

.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;
}

解决方案＃2

CSS-tricks文章Faking ‘float: center’ with Pseudo Elements应该有所帮助。

<强> FIDDLE

标记

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

CSS

#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;
}