[英]another HTML/CSS layout challenge
I've been trying to figure out a solution to this problem but haven't been 100% successful, just pseudo successful. 我一直试图找出这个问题的解决方案,但没有100%成功,只是伪成功。 The layout I'm looking for is one such that there is always a fixed padding/margin/height on the top and bottom of the page no matter the height of the content.
我正在寻找的布局是这样的,即无论内容的高度如何,页面的顶部和底部总是有固定的填充/边距/高度。
Further, the height of the content should start at the top of the page right after the padding and reach the bottom of the page right before the padding. 此外,内容的高度应该在填充之后立即从页面的顶部开始并且在填充之前到达页面的底部。 If the height of the content isn't large enough, it should span the whole page.
如果内容的高度不够大,则应该跨越整个页面。 If it is larger than the height of the page, the scrollbar should appear as in normal situations, but the top/bottom paddings need to be preserved.
如果它大于页面的高度,滚动条应该在正常情况下显示,但需要保留顶部/底部填充。
To view an example of my pseudo-solution to this, check out this fiddle... 要查看我的伪解决方案示例,请查看这个小提琴......
http://jsfiddle.net/UnsungHero97/uUEwg/1/ ... height not large enough http://jsfiddle.net/UnsungHero97/uUEwg/1/ ...身高不够大
http://jsfiddle.net/UnsungHero97/uUEwg/8/ ... height too large http://jsfiddle.net/UnsungHero97/uUEwg/8/ ...身高太大了
The problem with my solution is that if there is a background image, it will be covered up where the padding is. 我的解决方案的问题是,如果有背景图像,它将覆盖填充的位置。 So how do I extend my solution such that if there is a background image, it will still be visible where the top/bottom paddings are?
那么如何扩展我的解决方案,使得如果有背景图像,它仍然可以看到顶部/底部填充的位置? I would prefer this to be a HTML/CSS only solution, which is what makes this really hard!
我更喜欢这是一个HTML / CSS唯一的解决方案,这使得这真的很难!
Let me know if I need to clarify anything. 如果我需要澄清任何事情,请告诉我。
I came up with this: 我想出了这个:
http://jsfiddle.net/bKsad/ http://jsfiddle.net/bKsad/
box-sizing: border-box
, it won't work in IE7 and older. box-sizing: border-box
,它在IE7及更早版本中无法使用。 #padding-bottom
with #content:after
. #content:after
替换#padding-bottom
。 Beware IE8 though, I couldn't quite get it working. CSS: CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url(http://dummyimage.com/100x100/f0f/fff);
}
#wrapper {
margin: 0 auto;
width: 300px;
height: 100%;
padding: 15px 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
background-color: #C9E6FF;
min-height: 100%;
}
#padding-bottom {
height: 15px;
}
HTML: HTML:
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
这可能是你所追求的=> http://jsfiddle.net/Husar/uUEwg/24/ ?
The best and easy solution for this issue is this one.
这个问题的最佳和简单的解决方案就是这个。 In this case you need two heights :
在这种情况下,您需要两个高度:
- Windows height
Windows高度
- Side-bar navigation height
侧栏导航高度
- Then check of windows height is less than div, then you need to increase the height of content area
然后检查窗口高度是否小于div,那么你需要增加内容区域的高度
$( document ).ready(function() {
var navh = $(".side-nav").height();//ide-nav
var h = window.innerHeight;
if (navh >h){
$("#mainBody").height(navh);
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.