Question

我试图将标签小部件中的标签固定到绝对位置。见http://jsfiddle.net/5umRd/3/

<div id="houseBar">
    <ul>
        <li><a href="#Hnew">New Households</a></li>
        <li><a href="#Hactive">Active Routes</a></li>
        <li><a href="#Hinactive">Inactive Routes</a></li>
        <li><a href="#Hgone">Moved Out</a></li>
    </ul>

    <div id="Hnew" style="overflow-y: auto">
        Loading new households...
    </div>
    <div id="Hactive" style="overflow-y: auto">
        will contain table of currently used houses
    </div>
    <div id="Hinactive" style="overflow-y: scroll">
        will contain table of hidden houses
    </div>
    <div id="Hgone">
        will contain list of previously known houses that have disappeared from the list
    </div>
</div>

和我的css样式：

    #houseBar { top: 0; position: absolute; max-height: 300px; max-width: 98%; overflow-y: scroll }
    #Hnew, #Hactive, #Hinactive, #Hgone {height: 3000px}

基本上，我希望能够随时查看标签，无论我在每个内容div中滚动的位置（内容可以滚动也是一个加号）。

用不同的css风格玩了几个小时后，我决定不知道该怎么做。

Answer 1

改变你的风格

#houseBar { top: 0; position: absolute; height: 300px; width: 70%; overflow-y: scroll }

而不是使用max-width，只需使用width，这将给你一个固定的宽度。

Answer 2

这是 FIDDLE

<强> CSS：

/* Generic pane rules */
 html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
.scroll-x {
    overflow-x: auto;
}
.scroll-y {
    overflow-y: auto;
}
#houseBar ul {
    top: 0;
    position: fixed;
    max-height: 300px;
    max-width: 98%;
}
#houseBar ul li {
    position: relative;
    width:auto;
    margin-right:10px;
    height:40px;
}
#houseBar>div, #Hnew, #Hactive, #Hinactive, #Hgone {
    position relative;
    overflow-y: scroll;
    height: 3000px;
    padding-top:50px;
    background-color:#fff;
}
.map-canvas {
    width: 100%;
    height: 100%;
    background: grey
}

使用jQuery UI Tabs，无法获得Tabs位置绝对

2 个答案: