javascript - 动态加载CSS的CSS窗口高度问题

Question

请走here并使用用户名“admin”和密码“endlesscomic”(不带包装引号)查看网络应用程序演示。

基本上我想做的是逐步将我的工作集成到这个网络应用程序中，比如说，每天晚上，为客户检查进度。另外，他还想看看，一开始，一个关于页面布局的模型。

我正在尝试使用 960 网格系统来实现此目的。到目前为止，还不错。

除了一个问题，当 jQuery 动态加载“mockup.css”时，它会将窗口“扩展”到底部，这是我不想拥有的东西......

作为一个没有经验的网络开发者，我不知道哪一部分是错误的。下面是我的js:

/* master.js */
$(document).ready(function()
{
    $('#addDebugCss').click(function()
    {
    alertMessage('adding debug css...');
    addCssToHead('./css/debug.css');
    $('.grid-insider').css('opacity','0.5');//reset mockup background transparcy
    });

    $('#addMockupCss').click(function()
    {
    alertMessage('adding mockup css...');
    addCssToHead('./css/mockup.css');
    $('.grid-insider').css('opacity','1');//set semi-background transparcy for mockup
    });

    $('#resetCss').click(function()
    {
    alertMessage('rolling back to normal');
    rollbackCss(new Array("./css/mockup.css", "./css/debug.css"));
    });
});

function alertMessage(msg)  //TODO find a better modal prompt
{
    alert(msg);
}

    function addCssToHead(path_to_css)
{
    $('<link rel="stylesheet" type="text/css" href="' + path_to_css + '" />').appendTo("head");
}

    function rollbackCss(set)
{
    for(var i in set)
    {
    $('link[href="'+ set[i]+ '"]').remove();
    }
}

外部的mockup.css应该加点什么？或者我的 master.js 有什么要改变的？

提前感谢您的任何提示/建议。

Answer 1

这是#page-container div。它包含页面的所有内容，所以它有 600 像素高。它放置在书籍下方，因此将页面高度推至 1000px 总计。 position relative 和 -350px top 在视觉上移动了它，但它仍然在流中占据它的位置。

最简单的解决方案是将书籍从流程中移出，这样您就不必尝试根据页面内容进行调整。简单地将它们定位在页面上的绝对位置或固定位置。

希望这对您有所帮助。