自动增加div高度（100％父级），留下顶部和底部边距？

http://jsfiddle.net/YumHS/自动增加div高度（100％父级），留下顶部和底部边距？

在jsfiddle der中给出的页面是cont div中的一个侧栏。

<section class="cont"> 
       <div class="sidebar"> 
        <ul> 
         <li>sidebar</li> 
        </ul> 
       </div> 
       <div class="content"> 
        <div class="cm_logo"><img src="img/turf_cm_logo.png"></div> 
       </div> 
</section>

边栏有一个右边框。 Der是边栏顶部的10px页边距。同样我也希望底部有10个边距。我已经使用了100％的高度，以便div.sidebar填满整个屏幕。但是由于我使用了粘性页脚，因此使用此方法页边空白不可用。我能为此做些什么？请帮忙。

检查演示中的jsfiddle，了解我的问题

来源

2012-03-24 Nithin Emmanuel

看到我的答案，让我知道如果有问题，还是我滞后一些地方..请参阅精确的输出DEMO小提琴。 – w3uiguru 2012-03-24 20:15:12

亲爱的看到我更新的小提琴，让我知道你是否面临任何问题。 – w3uiguru 2012-03-25 07:07:04

看到我在系统中获取的输出的屏幕截图。 – w3uiguru 2012-03-25 08:43:11

见代码和演示的小提琴

小提琴：http://jsfiddle.net/YumHS/2

演示：http://jsfiddle.net/YumHS/2/embedded/result/

更新小提琴： 1280 x 800分辨率根据您的要求。

http://jsfiddle.net/YumHS/5/embedded/result/

以获得所需的输出，可以使用的1像素X 2000像素的图像。调整的背景图片的位置看到下面的CSS，你可以设置背景图片的高度（见110%;），只要你想。

.sidebar { 
    position: fixed; 
    top: 100px; 
    width: 227px; 
    /*border-right: 1px solid #949698;*/ 
    height: 100%; 
    background: url("http://img152.imageshack.us/img152/8141/fullbar.png") no-repeat right 110%; 
}

在我的系统是看起来像下面的图片：

enter image description here

更新小提琴http://jsfiddle.net/YumHS/11/embedded/result/ - 在侧边栏和页脚2px的空间空间。

来源

2012-03-24 20:14:37 w3uiguru

请解释一下。 – 2012-03-24 21:22:04

看到这个演示http://jsfiddle.net/YumHS/embedded/result/。侧栏右侧边框触摸页脚。我希望页脚和侧栏边框之间有10px的页边空白。像侧边栏的顶部。此外，侧边栏高度需要增加取决于显示器尺寸或主要内容尺寸。即：始终侧栏必须距页脚10px。 – 2012-03-25 04:09:03

@happy singh：谢谢你的回复。但65％的高度不会一直工作。取决于页面高度这个变化..我想要一个完美的解决方案，使侧边栏和页脚之间的10px页边距。 ANOTHER IMPORTENT件事我忘了提的是侧边栏固定在一个位置...... – 2012-03-25 04:15:49

自动增加div高度（100％父级），留下顶部和底部边距？

回答

相关问题