目前我在让我的布局跨浏览器工作时遇到了麻烦。在所附图片中,您可以看到预览。
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,但我想你明白了 ;))
附件(预览)可以在下面找到
最佳答案
在您的问题中,您不断做出虚假陈述并自相矛盾(例如,您在谈论一个粘性页脚,但您也暗示页面不会滚动 - 因为所有元素的高度总和为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
中放置的内容
关于html - 放置100%高度的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17659329/