好的,这很难解释。我有一个带有两个可折叠菜单的页面。一个绝对位于左上角。当我崩溃时,剩下的内容都会像预期的那样被压到左上角。
另一个菜单绝对位于右下角。当它被展开时(加载页面时的默认状态)它位于右下角,距离底部和右边5个像素,正如预期的那样。然而,当我崩溃时,突然剩下的内容从距离底部和右边5个像素开始,然后从页面向右和向下流动,扩展页面并导致滚动条。
所需的行为是将剩余的内容压缩到页面的右下角,而不更改页面尺寸。
发布我的代码会很棘手,因为很多代码是通过JavaScript动态生成的。
每个菜单包含一个容器div中的两个子div。容器div绝对定位(左上角或右下角,具体取决于哪个菜单)。第一个子div是活动菜单选项卡的内容,向左浮动并且边缘顶部刚好足以将其放在菜单选项卡下。第二个子div是菜单选项卡。这个div是绝对定位的(以便让内容div在它后面流动)。选项卡div中的每个选项卡都向左浮动,因此我可以动态添加更多。
其中一个标签始终是“隐藏/显示”标签,基本上只是切换显示:隐藏在菜单的内容div上。
所以,据我所知,浮动内容div不知何故使菜单不会从页面流出,当它“折叠”(即隐藏)时,没有任何东西可以保持绝对定位的tab div不会流出页面。
我想我会尝试将有问题的div和css代码删除到它自己的页面中,这样我就可以隔离行为,并发布一些连贯的代码。与此同时,任何建议都非常受欢迎。
谢谢! ==马特
P.S。通常我会让菜单中的所有内容相对定位。我在一个浮动的内容div上放置一个绝对定位的div的原因是我可以控制活动选项卡的底部是否看起来“连接”到内容div。如果我有两个div相对而且只是将tab 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中工作,请尝试this link来查看行为。仅供参考,javascript通常不依赖于巨大的if-else语句,我只是这样做,所以我不必发布所有动态菜单生成代码。
P.P.S。我基本上只在Chrome v20中测试过这个,虽然我刚刚测试了Firefox v13和IE9并且得到了同样的行为。我不太关心跨浏览器支持。此页面仅适用于使用最新和最佳浏览器的用户。
UPDATE2 :更新了链接。添加了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, "");
}
}
}
HTML
<!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>
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;
}
答案 0 :(得分:4)
请尝试以下操作:http://jsfiddle.net/bQ6vZ/1/。
这是按照你的意愿表演吗?
我添加了以下CSS规则:
#menuInfoWrapper.hidden {
display: block;
}
#menuInfoWrapper.hidden #menuInfoTabs {
top: auto;
bottom: 0;
right: 0;
}
并在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');
}
希望这有帮助。