1
好吧，這將很難解釋。我有一個包含兩個可摺疊菜單的頁面。其中一個絕對位於左上方。當我將它摺疊時，其餘的內容都像預期的那樣被擠壓到左上角。保持絕對定位，從頁面滾動到右下方的可摺疊div
其他菜單絕對位於右下方。展開後（加載頁面時的默認狀態），它位於右下角，距離底部和右側5個像素，如預期的那樣。但是，當我摺疊它時，突然間剩下的內容從底部和右側5個像素開始，然後從頁面向右和向下流動，擴展頁面並導致滾動條。
希望的行爲是將剩餘內容壓扁到頁面的右下角，而不更改頁面尺寸。
發佈我的代碼會很棘手，因爲它很多是通過JavaScript動態生成的。
每個菜單由一個容器div內的兩個子div組成。容器div完全定位（左上或右下，取決於哪個菜單）。第一個子div是活動菜單選項卡的內容，向左浮動並具有足夠高的邊距以將其放在菜單選項卡下。第二個子div是菜單選項卡。這個div絕對定位（以便讓內容div在它後面流動）。選項卡div內的每個選項卡都向左浮動，因此可以動態添加更多選項卡。
其中一個標籤總是「隱藏/顯示」選項卡，基本上只是切換顯示：隱藏在菜單的內容div上。
所以，據我瞭解，浮動的內容div保持菜單不流出頁面，當它「摺疊」（即隱藏）時，沒有任何東西可以使絕對定位的標籤div不會流出頁面。
我想我會嘗試將有問題的div和css代碼翻錄到它自己的頁面中，以便我可以隔離行爲併發布一些連貫的代碼。同時，任何建議都非常受歡迎。
謝謝！ == Matt
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
UPDATE：我儘可能地從我的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;
}
請問您可以在底部發布div的html和css ...我可以在jsfiddle中使用它並嘗試探索它。 – AdityaSaxena 2012-07-14 07:05:46
由於您尚未添加任何代碼，因此無論如何我都必須拍攝。 我認爲當你摺疊底部div時，這是正確的，這個div的底部邊緣不是你認爲它們的地方。因此，定位越來越混亂。你可能想檢查一下。 – AdityaSaxena 2012-07-14 07:31:43
我使用JSFiddle更新了OP，並鏈接到了我的工作代碼。 – mmseng 2012-07-14 08:43:00