html - 是否可以重新定义屏幕视口(viewport)或具有 "not-so-to-the-right"固定对齐元素？

Question

我正在尝试使用 position:fixed 布局。但是，它看起来太宽了，所以我虽然只是将我的页面放在一个具有 max-width 属性的容器中，但它不起作用，固定元素占据视口(viewport)顶部/底部/左侧/视口(viewport)的正确位置而不是父级的位置，尽管如果未定义位置，它们将位于我想要的位置。

我希望在我的页面顶部有 2 个固定元素，包含在最大宽度内。第一个元素左对齐(不需要 left:0px)
第二个元素右对齐(right:0px 需要(或其他？)

我可以重新定义视口(viewport)吗？你看到任何替代方案吗？

Test case代码:

注意:stuff2 黄色背景需要与 .page 背景对齐。

html

<div class="page">
    <div class="header1">
        stuff1
    </div>
    <div class="header2">
        stuff2
    </div>
    other stuff1<br />
    other stuff2<br />
    other stuff3<br />
    other stuff4<br />
    other stuff5<br />
</div>

CSS

html,body {padding:0px;margin:0px;height:100%}

.page {
    max-width:700px;
    margin:0px auto;
    background:#ffddff;
    min-height:100%;
}

.header1 {
    position:fixed;
    top:0px;
    background:#eeffff;
    max-width:700px;
    width:100%;
    height:50px;
}

.header2 {
    position:fixed;
    top:0px;
    background:#ffffee;
    max-width:700px;
    width:30%;
    height:50px;
    right:0px;
}

Answer 1

这更接近，但可能不太正确。如果这对您不起作用，我会在稍后进行更多研究:

http://jsfiddle.net/A5NX9/