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

【问题标题】：Increase a div height automatically (100% parent) leaving a top and bottom margin?自动增加 div 高度（100% 父级）留下顶部和底部边距？
【发布时间】：2012-04-08 22:47:40
【问题描述】：

http://jsfiddle.net/YumHS/

在 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 的演示，了解我的问题

【问题讨论】：

查看我的答案并让我知道是否有任何问题或我在某些地方滞后。请参阅 DEMO fiddle 以获得确切的输出。
亲爱的看看我更新的小提琴，如果你遇到任何问题，请告诉我。
查看我在系统中获得的输出的屏幕截图。
您的显示器分辨率是多少？我正在使用 1024 X 768
根据您的要求 1280 x 800 分辨率查看更新的小提琴。

标签： css html height sticky-footer

【解决方案1】：

查看 fiddle 的代码和演示

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

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

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

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

为了获得所需的输出，我使用 1px x 2000px 的图像。并调整背景图片的位置见下面的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%;
}

在我的系统中如下图所示：

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

【讨论】：

查看此演示 jsfiddle.net/YumHS/embedded/result。侧边栏右边框接触页脚。我想要页脚和侧边栏边框之间有 10px 的边距。就像侧边栏的顶部。此外，需要增加的侧边栏高度取决于显示器大小或主要内容大小。即：始终侧边栏必须距离页脚 10 像素。
@happy singh：感谢您的回复。但是 65% 的高度不会一直有效。取决于页面高度，这会有所不同。我想要一个完美的解决方案，在侧边栏和页脚之间留出 10px 的边距。我忘记提及的另一件重要的事情是侧边栏固定在一个位置......
垂直边框线仍然触及页脚知道。我希望页脚和线条之间有 10 像素的间隙。
但不在我的系统上。它仍然是一样的。也许你的显示器分辨率比我的高。
但这并不能解决我的问题。该页面可能会访问我的各种浏览器大小。