Question

这是该页面的链接： http://whiterootmedia.com/test/test3

这是代码：

    <div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->"> 
    <ul id="banner_ul">
    <li id="wrm"><a href="http://whiterootmedia.com"><i>The homepage of White Root Media!</i></a></li>
    <li id="google"><a href="https://plus.google.com/u/0/b/115943543157099352927/115943543157099352927" target="_blank"><i>+1 us on Google!</i></a></li>
    <li id="facebook"><a href="http://www.facebook.com/pages/White-Root-Media/194381903928501" target="_blank"><i>Like us on Facebook!</i></a></li>
    <li id="twitter"><a href="http://twitter.com/#!/WhiteRootMedia" target="_blank"><i>Tweet about us on Twitter!</i></a></li>
    </ul>

    <div id="container" style="<!-- border:solid yellow 1px -->; display: table;">

    <div id="content" style="<!-- border:solid purple 1px; --> display:table-cell; ">
    This content determines the height. The text will not wrap. There will be a min-width yet to be determined.
    This content determines the height. The text will not wrap. There will be a min-width yet to be determined.
    This content determines the height. The text will not wrap. There will be a min-width yet to be determined.

    </div>

    <div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div>

    </div>

    <div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div>

我希望横幅位于顶层，而“容器”div则位于

下方

Answer 1

以下是演示：http://jsfiddle.net/Wyvk8/

我删除了你的内联CSS样式，并通过CSS规则应用它们，如下所示：

html, body {
    height     : 100%;
    min-height : 100%;
}
#banner {
    position      : absolute;
    top           : 0;
    left          : 0;
    height        : 100px;
    width         : 100%;
    overflow      : hidden;
    background    : url('../../images/banner_repeat.jpg') repeat-x;
    z-index       : 2;
}
#content {
    position : absolute;
    top      : 100px;
    left     : 0;
    right    : 270px;
    bottom   : 100px;
    overflow : auto;
}
#right_column {
    position   : absolute;
    top        : 0;
    bottom     : 0;
    right      : 0;
    width      : 270px;
    z-index    : 3;
    background : url('../../images/treetrunk7.png') repeat-y;
}
#footer {
    position   : absolute;
    left       : 0;
    bottom     : 0;
    right      : 270px;
    height     : 100px;
    overflow   : hidden;
    background : url('../../images/grass.png') repeat-x;
    z-index    : 2;
}

我改变了嵌套HTML的方式：

<div id="banner"> 
    <ul id="banner_ul">
        ...
    </ul>
</div>

<div id="content">
    ....
</div>

<div id="right_column">tree</div>

<div id="footer">grass</div>

上述代码的效果是#header元素位于顶部，#content元素位于左侧且垂直居中，#footer元素位于底部，#right_column元素位于页面的右侧。当#content元素的内容溢出并且滚动条直接应用于元素时，@media all and (max-width: 500px) { #right_column { display : none; } #content, #banner, #footer { right : 0; } }元素会获得滚动条。

BONUS ROUND

使用CSS媒体查询，当页面太窄时，您可以隐藏右栏：

{{1}}

以下是演示：http://jsfiddle.net/Wyvk8/1/（如果您使页面宽度小于500px，则右侧列将消失，仅在支持媒体查询的浏览器中消失）

Answer 2

您需要将position: fixed应用到您的顶部横幅，我假设元素ID＆＃34; banner_ul＆＃34;。这意味着它将像绝对定位一样位于页面布局之外，但不受滚动影响;它始终与浏览器窗口相关top: 0; left: 0;。请记住适当调整下方的所有容器，使它们从窗口顶部坐下[横幅的高度]，否则它们会在页面加载时与横幅重叠。

Answer 3

看起来你已经将你的横幅包裹在所有元素周围，因此它不会分层放在容器div的顶部，因为它也影响了div，因为它在横幅div的内部。

将顶部的横幅放置为顶层

3 个答案:

BONUS ROUND