html - 放置100%高度的div

Question

目前我在让我的布局跨浏览器工作时遇到了麻烦。在所附图片中，您可以看到预览。

height: 100%;

一些信息:

• div #Header
  • 宽度:100%
  • 高度:可变
• div #Sidebar(溢出-y)
  • 宽度:300px
  • 高度:100% 减去页眉 + 页脚的高度
• div #frameHeader
  • 宽度:100% 减去侧边栏宽度 (300px)
  • 高度:100% 减去页眉 + 页脚的高度
• iframe #iframe(溢出-y)
  • 宽度:100% 减去侧边栏宽度 (300px)
  • 高度:100% 减去页眉 + 页脚 + frameheader 高度
• div #Sticky Footer(当然是粘在底部)
  • 宽度:100%
  • 高度:可变

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

当前代码:http://jsfiddle.net/s6wVw/ (丑陋的 css，但我想你明白了 ;))

附件(预览)可以在下面找到

preview image

Answer 1

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

出于上述原因，我做出了以下假设:

1. 您希望主要区域(页眉、页脚、侧边栏、框架标题、框架主体)的尺寸总和始终为 100%
2. 您不希望浏览器滚动
3. 如果内容溢出，您希望在侧边栏和框架主体中滚动

以上内容会导致糟糕的网站设计，因为如果浏览器/窗口大小 <= 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>

注意事项

1. 您可以在以下 div 中放置您喜欢的任何内容:#head , #sidebar , #fhead , #fbody , #foot
2. jQuery运行 setSizes();在窗口调整大小时运行两次。这是为了考虑可能影响可用宽度/高度的任何滚动条
3. 您可能需要设置额外的 overflow其他元素的规则取决于您在 divs 中放置的内容