这种DIV布局是否可行？

Question

我无法生成HTML / CSS布局。想到它的最佳方法是采用正常的水平居中页面布局。只有我希望一个div超出中心布局延伸到浏览器窗口的右边缘。

这应该可以在浏览器窗口调整大小的情况下流畅地工作。

Answer 1

以下是两种仅支持CSS的方法来实现这样的布局。两者都在IE 7/8/9和Chrome中进行了简要测试。

示例1

以下是您了解所有元素高度的示例。

演示：http://jsfiddle.net/3RDuy/2/

<强> HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

<强> CSS

DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }​

示例2

以下是一个只知道顶部和底部高度的示例。

演示：http://jsfiddle.net/3RDuy/3/

<强> HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

<强> CSS

DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa;  height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }​

---

如果你想要所有东西的变量高度（包括高度超过100％的能力），你可能需要使用JavaScript。

Answer 2

这是一个非常有趣的挑战。

几个月前，我需要一个类似的效果，一个元素从容器延伸到窗口的边缘，但不需要可用于内容的空间 - 这只是一种设计效果。

蒂姆的答案很可靠，但需要知道元素的高度是不切实际的。我的解决方案消除了这一要求。

利用包装器，一些填充和负边距，我们可以操纵布局来复制所需的功能。

<强>标记：

<div class="header">
    <h1>Hello World!</h1>
</div>

<div class="content">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

<div class="footer">
    <p>Lorem ipsum dolor sit amet.</p>
</div>​

<强> CSS：

.header,
.footer {
    clear: both;
    margin: auto;
    width: 600px; /* Your container width */
    background: grey;
    }

.content {
    float: right;
    width: 50%;
    padding-left: 300px; /* Half of your container width */
    }

.a {
    float: left;
    margin-left: -300px; /* Half of your container width */
    width: 200px;
    height: 10em;  /* Not required, set for visual */
    background: red;
    }

.b {
    margin-left: -100px; /* The difference between half your container width and element A */
    height: 10em; /* Not required, set for visual */
    background: yellow;
    }

演示： http://jsfiddle.net/rkW9J/

应该注意的是，这还没有经过跨浏览器的广泛测试，但没有实现任何明显的布局怪癖，所以我们应该做得很好。

Answer 3

无法找到解决方案宽度纯CSS，但这里是如何用javascript / jquery做的。

Demo

HTML：

<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>​

CSS：

#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }

jQuery的：

var right = $('#right'),
    left = $('#left');

$(window).on('resize',positionRightDiv);

function positionRightDiv(){
    var posLeft = left.offset().left + left.outerWidth(true),
        posTop = left.offset().top;
    right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();

---

注意：要使此方法有效，#wrapper必须不拥有position:relative;或overlow:hidden;

---

P.S。好原子心母亲简介pic; - ）