Question

我正在尝试创建一个类似于向导的界面，其中有后退/下一个和重新开始按钮，主要内容占据了大部分空间。这是在HTML / CSS中，并使用jQueryUI进行HTML应用程序（HTA），仅针对IE8。目前这就是我所拥有的：

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的Accordion取决于Accordion的内容（Accordion总是放在#maincontent中）和我希望它填充父div 时，结果非常不一致（＃搜索Maincontent）。尽管将Accordion设置为heightStyle：“fill”，但页面之间的高度很容易变化。（使用load（）将内容动态加载到#maincontent。）

这就是我希望它看起来（以及一些页面）：

Correct Look

以及某些页面的外观（有些页面比这更糟糕）：

Bad Look

Answer 1

最终我发现了如何解决这个问题。我的问题主要是由于尝试将内容加载到具有我的大小调整参数的div（#maincontent）中。我需要做的是在accordion div上指定我的大小调整参数，而不只是在#maincontent上指定高度大小。以下是我改变它以使其工作的原因：

#maincontent {
    height: 300px;
}

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

现在，在页面之间加载时，你甚至无法确定它们是完全不同的html页面 - 大小仍然非常稳定。

使用jQueryUI创建向导HTML / CSS接口

1 个答案: