Question

目前，我的布局在跨浏览器中运行时遇到了麻烦。在附加的图像中，您可以看到预览。

height: 100%;

一些信息：

div #Header
- 宽度：100％
- height：variable
div #Sidebar（overflow-y）
- 宽度：300px
- 身高：100％减去页眉+页脚高度
div #frameHeader
- 宽度：100％减去侧边栏宽度（300px）
- 身高：100％减去页眉+页脚高度
iframe #iframe（overflow-y）
- 宽度：100％减去侧边栏宽度（300px）
- 高度：100％减去页眉+页脚+框架高度
div #Sticky页脚（粘到底部）
- 宽度：100％
- height：variable

我花了无数个小时试图让它工作，我想以前有人应该遇到这个问题？我希望有人能够给我一个有效的跨浏览器示例！

当前代码：http://jsfiddle.net/s6wVw/（丑陋的CSS但我认为你明白了这一点;）

附件（预览）可以在下面找到

preview image

Answer 1

在你的问题中，你不断做出虚假的陈述并与自己相矛盾（例如，你在谈论一个粘性页脚，但你也暗示页面不会滚动 - 因为所有元素的高度总和为100％）。但是，我会尽力帮助你。

由于上述原因，我做了以下假设：

您希望主要区域（页眉，页脚，侧边栏，框架标题，框架主体）的尺寸总是达到100％
您不希望浏览器滚动
如果内容溢出，您希望在侧栏和框架中滚动

以上会导致网站设计不佳，因为如果浏览器/窗口大小为<= 300px宽，那么您将无法看到任何框架等。同样，如果browser/window height <= foot height + head height，您将看不到sidebar，frame head或frame body中的任何内容。

话虽如此，这是一个使用jQuery，html和css的示例。

<强> CSS

html, body{
    margin:0; padding:0; border:0;
    color:#fff;
}
#head{
    width:100%;
    background:#aaa;
}
#body{
    width:100%;
}
    #sidebar{
        display:inline-block;
        width:300px; height:100%;
        background:#111;
        vertical-align:top;
        overflow:scroll;
    }
    #frame{
        display:inline-block;
        vertical-align:top;
        height:100%;
    }
        #fhead{
            width:100%;
            background:#333;
        }
        #fbody{
            width:100%;
            background:#777;
            overflow:scroll;
        }
#foot{
    position:fixed;
    top:100%;
    width:100%;
    background:#aaa;
}
h1{margin:0; padding:10px;}

<强>的jQuery

function setSizes(){
        var docWidth = $(window).width();
        var docHeight = $(window).height();
        var headHeight = $('#head').height();
        var footHeight = $('#foot').height();
        var bodyHeight = docHeight - headHeight - footHeight;
        var fHeadHeight = $('#fhead').height();

        $('#body').css({
            height: bodyHeight
        })
        $('#sidebar').css({
            height: bodyHeight
        })
        $('#frame').css({
            width: docWidth - 300
        })
        $('#fbody').css({
            height: bodyHeight - fHeadHeight
        })

        $('#foot').css({
            "margin-top": -footHeight
        })
    }
$(function(){
    setSizes();

    var doit;
    $(window).resize(function(){
        setSizes();
        setSizes();
    })
})

<强> HTML

<div id="head"><h1>Head Section</h1><br><br><br><br></div>
<div id="body">
    <div id="sidebar"><h1>Side Bar</h1>
    </div><div id="frame">
        <div id="fhead"><h1>Frame Head</h1><br><br></div>
        <div id="fbody"><h1>Frame Body</h1></div>
    </div>
</div>
<div id="foot">
    <h1>Foot Section</h1><br>
</div>

备注

您可以在以下div中添加您喜欢的任何内容：#head，#sidebar，#fhead，#fbody，#foot

jQuery在窗口调整大小时运行setSizes();两次。这是为了考虑可能影响可用宽度/高度的任何滚动条

您可能需要根据overflow
中的内容为其他元素设置其他divs规则

Div高度为100％

1 个答案: