保持绝对定位，可折叠 div 位于右下角，避免滚动页面

Question

保持绝对定位，可折叠 div 位于右下角，避免滚动页面

好吧，这很难解释。我有一个带有两个可折叠菜单的页面。其中一个绝对位于左上角。当我折叠它时，剩余的内容都被压缩到左上角，正如预期的那样。

另一个菜单绝对位于右下角。当它展开时（加载页面时的默认状态），它位于右下角，距离底部和右侧 5 个像素，如预期的那样。然而，当我折叠它时，突然剩余的内容从距底部和右侧 5 个像素的地方开始，然后从页面向右和向下流动，扩展页面并导致滚动条。

所需的行为是将剩余内容压缩到页面的右下角，而不更改页面尺寸。

发布我的代码会很棘手，因为其中很多代码是通过 JavaScript 动态生成的。

每个菜单由容器 div 内的两个子 div 组成。容器 div 是绝对定位的（左上角或右下角，取决于哪个菜单）。第一个子 div 是活动菜单选项卡的内容，向左浮动，顶部边距刚好足够高，可以将其放在菜单选项卡下方。第二个子 div 是菜单选项卡。该 div 是绝对定位的（以便让内容 div 在其后面流动）。选项卡 div 内的每个选项卡都向左浮动，因此我可以动态添加更多选项卡。

其中一个选项卡始终是“隐藏/显示”选项卡，基本上只是在菜单的内容 div 上切换显示：隐藏。

因此，据我了解，浮动内容 div 以某种方式阻止菜单从页面流出，并且当它“折叠”（即隐藏）时，没有任何东西可以阻止绝对定位的选项卡 div 从页面流出。

我想我会尝试将有问题的 div 和 css 代码删除到它自己的页面中，这样我就可以隔离行为，并发布一些连贯的代码。同时，任何建议都是非常受欢迎的。

谢谢！== 马特

PS 通常情况下，我会将菜单中的所有内容相对定位。我在浮动内容 div 顶部使用绝对定位的 div 的原因是这样我可以控制活动选项卡的底部是否看起来“连接”到内容 div。如果我有两个相对的 div，并且只是将选项卡 div 放在内容 div 的顶部，则我无法在正确的位置删除内容 div 的黑色顶部边框，使其看起来像是活动选项卡已连接到它。如果有人能想出一种方法来解决这个问题，同时仍然保持两个 div 的相对性，我也会对此感到失望。

我没有发布图片的代表，所以这里有一些链接：

这是菜单展开后的样子： http ://theroach.net/igp_menutest/css_menus1.png

它们在这里折叠起来： http://theroach.net/igp_menutest/css_menus2.png

这就是我想要的： http://theroach.net/igp_menutest/css_menus3.png

更新：我已经尽可能地从 JavaScript 中删除了菜单代码。这是带有工作代码的JSFiddle 。由于某种原因，onclick 事件在 JSFiddle 中不起作用，但它与我的测试页中的代码完全相同，因此如果您无法让它在 JSFiddle 中工作，请尝试此链接以查看行为。仅供参考，JavaScript 通常不依赖于巨大的 if-else 语句，我只是这样做了，这样我就不必发布所有动态菜单生成代码。

PPS 我基本上只在 Chrome v20 中测试过这一点，尽管我刚刚测试了 Firefox v13 和 IE9 并得到了相同的行为。我不太关心跨浏览器支持。此页面专为使用最新、最好的浏览器的用户而设计。

更新2：更新了链接。添加了 jsfiddle 代码的相关部分以满足新的相关代码要求：

JS

function tab(id) {
        if(id == 'menuCtrlTab1') {
            toggle('menuCtrlTab1');
            toggle('menuCtrlTab2');
            hide('menuCtrlForm2');
            show('menuCtrlForm1');
        }
        else if(id == 'menuCtrlTab2') {
            toggle('menuCtrlTab1');
            toggle('menuCtrlTab2');
            hide('menuCtrlForm1');
            show('menuCtrlForm2');
        }
        else if(id == 'menuCtrlTabHide') {
            hide('menuCtrlTab1');
            hide('menuCtrlTab2');
            hide('menuCtrlFormDiv');
            hide('menuCtrlTabHide');
            show('menuCtrlTabShow');
        }
        else if(id == 'menuCtrlTabShow') {
            show('menuCtrlTab1');
            show('menuCtrlTab2');
            show('menuCtrlFormDiv');
            hide('menuCtrlTabShow');
            show('menuCtrlTabHide');
        }

        else if(id == 'menuInfoTab1') {
            toggle('menuInfoTab1');
            toggle('menuInfoTab2');
            hide('menuInfoForm2');
            show('menuInfoForm1');
        }
        else if(id == 'menuInfoTab2') {
            toggle('menuInfoTab1');
            toggle('menuInfoTab2');
            hide('menuInfoForm1');
            show('menuInfoForm2');
        }
        else if(id == 'menuInfoTabHide') {
            hide('menuInfoTab1');
            hide('menuInfoTab2');
            hide('menuInfoFormDiv');
            hide('menuInfoTabHide');
            show('menuInfoTabShow');
        }
        else if(id == 'menuInfoTabShow') {
            show('menuInfoTab1');
            show('menuInfoTab2');
            show('menuInfoFormDiv');
            hide('menuInfoTabShow');
            show('menuInfoTabHide');
        }
        else {

        }
}

function toggle(id) {
    if(activated(id)) {
        deactivate(id);
    }
    else {
        activate(id);
    }
}

function hide(id) {
    docAddClass(id, 'hidden');
}
function show(id) {
    docRemoveClass(id, 'hidden');
}

function activate(id) {
    docRemoveClass(id, 'inActive');
    docAddClass(id, 'active');
}
function deactivate(id) {
    docRemoveClass(id, 'active');
    docAddClass(id, 'inActive');
}

function activated(id) {
    var e = docGet(id);
    if(e.className.search('active') == -1) {
        return false;
    }
    return true;
}



function docGet(id) {
    return document.getElementById(id);
}
function docAddClass(id, classToAdd) {
    var e = docGet(id);
    if(e.className.length <= 0) {
        e.className = classToAdd;
    }
    else {
        if(e.className.search(classToAdd) == -1) {
            e.className = e.className + ' ' + classToAdd;
        }
    }
}

function docRemoveClass(id, classToRem) {
    var e = docGet(id);
    if(e.className.length > 0) {
        if(e.className.search(classToRem) != -1) {
            e.className = e.className.replace(classToRem, "");
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

超文本标记语言

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name='Author' content='Matt Seng' />
        <meta name="Description" content="IGP" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="./style.css" media="screen" />
    </head>

    <body>

        <div id="menuDiv">
            <div id="menuCtrl">
                <div id="menuCtrlWrapper" class="menuWrapper">
                    <div id='menuCtrlFormDiv'>
                        <div id="menuCtrlForm1" class="menuForm">
                            Tab 1 contents<br>
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit. Duis est orci, malesuada<br>
                            vitae pulvinar nec, varius id felis. Vivamus<br>
                            et accumsan dui. Donec a nisl id dui gravida<br>
                            porttitor. Integer sed turpis arcu. Curabitur<br>
                            nec dolor urna, ac molestie neque. Nunc ac<br>
                            augue non mi imperdiet semper.
                        </div>
                        <div id="menuCtrlForm2" class="menuForm hidden">
                            Tab 2 contents<br>
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit. Duis est orci, malesuada<br>
                            vitae pulvinar nec, varius id felis. Vivamus<br>
                            et accumsan dui. Donec a nisl id dui gravida<br>
                            porttitor. Integer sed turpis arcu. Curabitur<br>
                            nec dolor urna, ac molestie neque. Nunc ac<br>
                            augue non mi imperdiet semper.
                        </div>
                    </div>
                    <div id="menuCtrlTabs" class="menuTabs">
                        <div id="menuCtrlTabShow" class="clickable tab showHide inActive hidden" onclick="tab(this.id);">
                            Show
                        </div>
                        <div id="menuCtrlTabHide" class="clickable tab showHide inActive" onclick="tab(this.id);">
                            Hide
                        </div>
                        <div id="menuCtrlTab1" class="clickable tab secondary  active" onclick="tab(this.id);">
                            1
                        </div>
                        <div id="menuCtrlTab2" class="clickable tab secondary inActive" onclick="tab(this.id);">
                            2
                        </div>
                    </div>
                </div>
            </div>
            <div id="menuInfo">
                <div id="menuInfoWrapper" class="menuWrapper">
                    <div id='menuInfoFormDiv'>
                        <div id="menuInfoForm1" class="menuForm">
                            Tab 1 contents<br>
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit. Duis est orci, malesuada<br>
                            vitae pulvinar nec, varius id felis. Vivamus<br>
                            et accumsan dui. Donec a nisl id dui gravida<br>
                            porttitor. Integer sed turpis arcu. Curabitur<br>
                            nec dolor urna, ac molestie neque. Nunc ac<br>
                            augue non mi imperdiet semper.
                        </div>
                        <div id="menuInfoForm2" class="menuForm hidden">
                            Tab 2 contents<br>
                            Lorem ipsum dolor sit amet, consectetur<br>
                            adipiscing elit. Duis est orci, malesuada<br>
                            vitae pulvinar nec, varius id felis. Vivamus<br>
                            et accumsan dui. Donec a nisl id dui gravida<br>
                            porttitor. Integer sed turpis arcu. Curabitur<br>
                            nec dolor urna, ac molestie neque. Nunc ac<br>
                            augue non mi imperdiet semper.
                        </div>
                    </div>
                    <div id="menuInfoTabs" class="menuTabs">

                        <div id="menuInfoTabShow" class="clickable tab showHide inActive hidden" onclick="tab(this.id);">
                            Show
                        </div>
                        <div id="menuInfoTabHide" class="clickable tab showHide inActive" onclick="tab(this.id);">
                            Hide
                        </div>
                        <div id="menuInfoTab1" class="clickable tab secondary  active" onclick="tab(this.id);">
                            1
                        </div>
                        <div id="menuInfoTab2" class="clickable tab secondary inActive" onclick="tab(this.id);">
                            2
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type='text/javascript' src='./script.js'></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

/* removes the top and left whitespace */
* { margin:0; padding:0; }

/* ensure full screen */
html, body {
    width:100%;
    height:100%;
    font-family: "Courier New", Courier, monospace;
    font-size: 95%;
}

/* remove the scrollbars */
canvas {
    display:block;
}

#menuCtrl {
    position: absolute;
    margin: 5px;
}

#menuInfo {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 5px;
}

.menuWrapper {
}

.menuForm {
    float: left;
    margin-top: 22px;
    padding: 5px;
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    border-top-left-radius: 0;
    box-shadow: 3px 3px 5px #333;
}

.menuForm table {
    padding-top: 3px;
}
.menuForm td, th {
    white-space: nowrap;
}
.menuForm th {
    text-align: left;
}

.menuTabs {
    position: absolute;
    white-space: nowrap;
    top: 0;
}

.menuTabs div.tab {
    float: left;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0 5px 0 5px;
    text-align: center;
    background-color: white;
    border: 2px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.menuTabs div.secondary {
    border-left: 0px;
}
.menuTabs div.active {
    opacity: 1;
    border-bottom: 2px solid white;
}
.menuTabs div.active.showHide {
    border-bottom: 2px solid black;
}
.menuTabs div.inActive {
    opacity: .75;
    border-bottom: 2px solid black;
}

.clickable {
    cursor: pointer;
}
.visible {
    text-decoration: underline;
    text-decoration-color: black;
}
.invisible {
    text-decoration: line-through;
    text-decoration-color: red;
}
.hidden {
    display: none;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

rex*_*mac 5

请尝试以下操作：http://jsfiddle.net/bQ6vZ/1/。

这样的表现是否如你所愿？

我添加了以下 CSS 规则：

#menuInfoWrapper.hidden {
    display: block;
}
#menuInfoWrapper.hidden #menuInfoTabs {
    top: auto;
    bottom: 0;
    right: 0;
}

Run Code Online (Sandbox Code Playgroud)

并在 JS 中添加了两行，即下面看到的hide('menuInfoWrapper');和show('menuInfoWrapper');行：

    else if(id == 'menuInfoTabHide') {
        hide('menuInfoTab1');
        hide('menuInfoTab2');
        hide('menuInfoFormDiv');
        hide('menuInfoFormWrapper');
        hide('menuInfoTabHide');
        show('menuInfoTabShow');
    }
    else if(id == 'menuInfoTabShow') {
        show('menuInfoTab1');
        show('menuInfoTab2');
        show('menuInfoFormDiv');
        show('menuInfoWrapper');
        hide('menuInfoTabShow');
        show('menuInfoTabHide');
    }

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助。

归档时间：	13 年，6 月前
查看次数：	2793 次
最近记录：	8 年，7 月前