Div時移當內容變得太大

我遇到一個項目，一些奇怪的行爲我工作：Div時移當內容變得太大

http://daft.net76.net/yah/

當您單擊規則的整個佈局的變化鏈接到由左像素或三個。我已將此歸因於該div中的內容數量，因爲當您單擊具有較小內容高度的「分數」鏈接時。

較低的DIV結構如下所示：

<div id="lowercontent"> 
    <div id="rulesDiv" > 
     <h1>Rules</h1> 
     <p>Clicking the roll button rolls the dice. You have 3 rolls per turn. 
     After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn. 
     Submit a combination of dice by clicking an option and clicking Score Roll. 
     To claim yahtzee either click the zee button, or score roll without anything selected. 
     To claim yahtzee either click the zee button, or score roll without anything selected. 
     To claim yahtzee either click the zee button, or score roll without anything selected. 
     To claim yahtzee either click the zee button, or score roll without anything selected.</p> 
    </div> 
    <div id="scoresDiv"> 
     <h1>Scores</h1> 
     <p>1</p> 
    </div> 
    <p id="closeTest"><span id="close">close</span></p> 
</div>

我使用jQuery功能的分數和規則之間切換。 lowercontent是一個固定寬度的div。內部規則和分數div沒有寬度。

任何想法？讓我知道是否需要更多關於div的詳細css。

來源

2009-12-07 febs

當顯示Rules div時，它會導致滾動條出現。首先，它真的沒什麼大不了的。我只是把它放在一邊。

如果真的困擾你，這種添加到您的CSS：

html { height: 100% } 
body { height: 101% }

這將迫使一個滾動條總是存在這樣的佈局不會移位。

來源

2009-12-07 03:00:25

啊啊這很簡單！謝謝！ – febs 2009-12-07 03:08:16

真是太棒了！ – ysth 2009-12-07 03:09:31

我的原創答案如下，但事實是，如果您覺得您需要做任何事情，只有一個很好的答案：模態窗口。

模態窗口是一個彈出前景，需要採取行動之前，你可以繼續做你在做什麼。即使您不知道名稱，您之前也曾使用過。一個例子是應用程序中的打開文件對話框。你必須選擇一個文件或取消繼續。

在網絡上，您可以輕鬆地複製此功能。它涉及「覆蓋」內容以阻止用戶觸摸它以及覆蓋層頂部的模式框。大多數Web示例都會遮蓋覆蓋層，以便讓用戶知道重點。

這可以解決您的問題，因爲它可以通過將新內容放在舊內容上來阻止內容變長，因此不需要顯示滾動條。

幸運的是，有預製解決方案（請參閱最後一行），但我認爲最適合您的解決方案是Facebox。它輕盈而性感，只是展示一些信息。它看起來並不像你需要在其他行動中陷入困境。

至少，這是因爲窗口上的滾動條彈出。

有幾種方法來解決這個問題，但一切都還哈克或不完善：

使用左對齊設計。
加載時，如果高度大於內容的計算高度（無滾動條），則強制內容創建滾動條。比較寬度。從內容的左邊距中扣除一半。呸！
使用onload和onresize鉤子手動將內容居中以更改內容的邊距。可能是最乾淨的，你可以留在margin:auto以防萬一。這對IE6不起作用，但我想這是預期的。
您可以將內容放入用戶必須切換的選項卡中。
使用彈出式模式圖層，而不是將內容附加到頁面的底部。我在想像LightBox，但內容而不是圖像。我認爲可能有一個腳本，它已經與內容做到了。

編輯：See this更多關於模態窗口的提示。

來源

2009-12-07 02:49:29 Oli

Div時移當內容變得太大

回答

相關問題