html - Div 放置 100% 高度

Question

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

height: 100%;

一些信息：

• div #标题
  • 宽度：100%
  • 高度：可变
• div #Sidebar (overflow-y)
  • 宽度：300 像素
  • 高度：100% 减去页眉 + 页脚高度
• div #frameHeader
  • 宽度：100% 减去侧边栏宽度 (300px)
  • 高度：100% 减去页眉 + 页脚高度
• iframe #iframe（溢出-y）
  • 宽度：100% 减去侧边栏宽度 (300px)
  • 高度：100% 减去页眉 + 页脚 + 帧头高度
• div #Sticky Footer（粘到底部当然）
  • 宽度：100%
  • 高度：可变

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

当前代码： http: //jsfiddle.net/s6wVw/（丑陋的css，但我认为您明白了；））

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

预览图像

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