Question

好的，所以我正在设计一个页面需要50％宽度的页面 - 没有问题。我还需要在屏幕顶部有一个50％宽的标题 - 没问题。最后我需要在固定的div中使用那个标题，以便在我滚动时它仍然位于我的屏幕顶部 - 这就是我遇到问题的地方，无论我怎么努力，我似乎无法得到那个顶级div大概是因为它是一个流体宽度，我无法真正指定一个像素边距？

这是我一直在努力的代码（现在保持简单）....

<div id="wrapper">
    <div id="topwrapper">
        <div id="top">
            <div id="topleft"></div>
            <div id="topright"></div>
        </div>
    </div>
    <div id="table">
        Lorum Ipsum to fill here.
        <div id="left"></div>
        <div id="right"></div>
    </div>
</div>

我的CSS .....

#wrapper {
    overflow:         auto;
    position:         absolute;
    top:              0px;
    left:             0px;
    height:           100%;
    width:            100%;
    background-image: url('images/background.jpg');
}

#table {
    position:         relative;
    margin:           0 auto;
    width:            50%;
    background-image: url('images/midmiddle.png');
    padding:          50px;
    padding-top:      130px;
}

#topwrapper {
    position:    fixed;
    margin-left: -112px;
    left:        50%;
    width:       50%;
    z-index:     20;
    height:      169px;
}

#top {
    position:         relative;
    margin-left:      -8px;
    left:             -50%;
    width:            100%;
    background-image: url('images/topmiddle.png');
    z-index:          20;
    height:           169px;
    padding-left:     112px;
    padding-right:    112px;
}

#left {
    position:         absolute;
    margin-left:      -162px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midleft.png');
    z-index:          10;
}

#right {
    position:         absolute;
    right:            -112px;
    top:              0px;
    width:            112px;
    height:           100%;
    background-image: url('images/midright.png');
    z-index:          10;
}

#topleft {
    position:         absolute;
    margin-left:      -168px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topleft.png');
    z-index:          10;
}

#topright {
    position:         absolute;
    right:            -56px;
    top:              0px;
    width:            112px;
    height:           169px;
    background-image: url('images/topright.png');
    z-index:          10;
}

所以我有100％宽和高的主包装拿走很多，topleft，topright，left和right divs在主div内重复我的盒子的两侧，但顶部是我的地方我被卡住了。

我发布的代码实际有效，但正如您所看到的那样，这是一个非常复杂的解决方法，大多数边距与我的侧面图像尺寸有关，但#top -8px是我唯一的方法似乎可以绕过它工作 - 必须有一个更简单的方法？！

非常感谢您的任何帮助：）

感谢输入 - 对于代码格式化感到遗憾，我在CSS之前放了四个空格，但我猜你们喜欢它在列表而不是行 - 抱歉，旧习惯......！

我已经设法让它在一定程度上再次发挥作用，在顶部包装器上左右25％，顶部100％宽度和-120px边缘......现在看着那个（鉴于我的图像是112px宽）我已经拾起并且在原始代码中可以看到额外的8px（-8px的左边距）。非常混淆在等式中它是如何......但它正在发挥作用！

我会看看那个小提琴，而不是我熟悉的东西，所以期待学习新东西：）

非常感谢大家的帮助:)。

Answer 1

如何尝试为#wrapper设置自动边距？也许问题是包装器没有固定到位，所以也许#wrapper正在移动，而不是桌子？

Answer 2

我通过创建一个固定的包装器，然后将可见元素定位为子元素来完成此操作。见http://jsfiddle.net/LDVmu/

所以，HTML是

<div id="top"><div>I am at the top!</div></div>

<div>blah blah blah</div>

我使用的CSS是

#top {position: fixed; width: 100%;}

#top div {width: 50%; margin: auto; border: 1px solid red; background: white;}

我知道它是另一个嵌套的div，它的语义较少，但我认为这是唯一可行的方法。绝对和固定定位以及左/右= 0的居中技巧似乎只适用于显式像素宽度。

Answer 3

I'm not sure from your question whether it's completely failing to centre-align (i.e. it's appearing on the left of the page) or if it's slightly off-centre, or as I suspect, almost completely over to the right.

#topwrapper has a width of 50% and also a left of 50%. So it starts halfway across the page and takes up half the page (the right half). Only that negative margin pushes it back in the correct direction at all. Instead of a negative margin, reduce left to 25%. Then you should no longer need the negative positioning / margin on #top.

It may still be just slightly off-centre after this. If so, that's probably because of the scrollbars appearing on #wrapper. #table adjusts to allow for them, #topwrapper doesn't (because it's fixed-position and so it only heeds what html and/or body are doing). The solution - for Chrome and Firefox at least, I've not tested it in others - is to make the scrollbar ever-present on html and never on body or #wrapper:

Change height to min-height in #wrapper, and add this:

html {
    margin:            0;
    height:            100%;
    overflow-y:        scroll;
}
body {
    margin:            0;
    min-height:        100%;
}

A couple of notes...

If you want #wrapper to have 100% height of the viewport, then body (and in most browsers html) need to have it too.
Your #table has padding-top of 130px but #topwrapper has a height of 169px so your Lorem Ipsum gets hidden underneath. I increased the padding-top to 180px.

将流体宽度div定位在固定div内，以固定到视口顶部

3 个答案: