使用jQueryUI創建嚮導HTML/CSS界面

我試圖創建一個類似嚮導的界面，其中有主要內容佔據大部分空間的後/後和重新啓動按鈕。這是在HTML/CSS和使用jQueryUI的HTML應用程序（HTA）只針對IE8。目前，這是我有：使用jQueryUI創建嚮導HTML/CSS界面

HTML：

<body scroll="no"> 
    <div id="maincontent"> 
    </div> 
    <div id="buttons"> 
     <button class="bottombutton" id="backbutton">Back</button> 
     <button class="bottombutton" id="startoverbutton">Start Over</button> 
     <button class="bottombutton" id="nextbutton">Next</button> 
    </div> 
</body>

CSS：

.bottombutton { 
    position: absolute; 
    margin-top: 20px; 
    bottom: 10px; 
} 

.centeredbuttons { 
    margin-left: auto; 
    margin-right: auto; 
} 

#backbutton { 
    left: 10px; 
} 

#nextbutton { 
    right: 10px; 
} 

#startoverbutton { 
    position: absolute; 
    left: 100px; 
} 

#maincontent { 
    position: fixed; 
    height: 340px; 
    width: 96.3%; 
    top: 12px; 
    left: 12px; 
}

但是，使用jQueryUI的手風琴視的內容時，結果是非常不一致手風琴（手風琴總是置於#maincontent）和我希望它填充父div（#mainco ntent）。儘管Accordion設置爲heightStyle：「fill」，但頁面之間的高度可以很容易變化。（內容是使用負荷（）動態加載到#maincontent。）

這是我想它看起來（和一些網頁做）：

Correct Look

而且有些頁面的外觀（有些比這更糟糕）：

Bad Look

來源

2013-12-08 Nick Betcher

你的其他標籤在哪裏？我不明白你爲什麼從這些截圖中使用手風琴。這裏有一個** [小提琴]（http://jsfiddle.net/CUPPT/1/）**混合來自jQueryUI Accordion/Fill的演示以及您的命名和按鈕。請更新您的問題。 – FelipeAls

我並不總是有其他選項卡。我將它用作嚮導的每個頁面的一致樣式。在發佈屏幕截圖的情況下，只有一個選項卡。 –

這是你想達到的目標嗎？ http://jsfiddle.net/CUPPT/2/ – FelipeAls

最後，我發現瞭如何解決這個問題。我的問題很大程度上是由於嘗試將內容加載到具有我的尺寸參數的div（#maincontent）中。我需要做的是在手風琴div上指定我的尺寸參數，而不是僅在#maincontent上指定的高度尺寸。這是我改變，使其工作：

#maincontent { 
    height: 300px; 
} 

#modeaccordion { 
    height: 300px; 
    width: 96.3%; 
    position: fixed; 
    top: 12px; 
    left: 12px; 
    max-height: 300px; 
}

現在頁面加載之間時，你甚至不能告訴他們是完全不同的html頁面 - 規模仍然非常穩定。

來源

2013-12-09 03:41:28

使用jQueryUI創建嚮導HTML/CSS界面

回答

相關問題