javascript - parent 高度80%的 child (高度不详)

Question

目标

设置一个 div，其高度为未定义高度的父级高度的 80%。更具体地说，我想要一个响应式效果。

问题

我有五层:.header、.site> .container> .right sidebar 和 < strong>.left 内容.

标题的高度为 50 像素。站点的高度是视口(viewport)高度 - 50 像素(从标题开始)。在站点的 div 内部，有一个容器。我想将他的高度设置为 视口(viewport)高度的 80% - 距标题 50 像素 - 站点的 div 偏移量(1.5em 填充) 我不会使用百分比，只有像素 - 什么我需要做什么？

FiddleJS

The problem is illustrated here.

技术细节

看起来很完美，对吧？是的，作品完美……像素。尝试将 .left-content 的高度更改为 80%，您将看到我的问题所在。

代码(与FiddleJS相同)

HTML:

<div class="header">
</div>
<div class="site">
    <div class="container">
        <div class="container-head">
        </div>
        <div class="container-body">
            <div class="right-sidebar">
                Just a menu will be right here.
            </div>
            <div class="left-content">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS:

body {
    font-family: Tahoma
}

.header {
    background-color: #49c98e;
    width: 100%;
    height: 50px;
}

.site {
    padding: 1.5em 0;
}

.container {
    background-color: #c7c7c7;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.right-sidebar {
    background-color: #a94cd5;
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 500px;
    overflow-y: scroll;
}

.left-content ul {
    padding: 25px 0;
    float: left;
}

.left-content ul li {
    background-color: #a94cd5;
    width: 150px;
    height: 100px;
    float: left;
    margin: 15px;
    list-style: none;
}

jQuery/JavaScript:

function calculateResponsiveWidth() {
    $realWidth = $(".container").width() - $(".right-sidebar").outerWidth(),
    $containerContent = $(".left-content");

    $containerContent.css({
        "width": $realWidth
    });
}

$(window).on("resize", function () {
    calculateResponsiveWidth();
});

calculateResponsiveWidth();

提前致谢。

更新 v1

我开始认为使用百分比并不是最好的选择。在容器区域之后，我想要一个 25 像素的间距 - 并且在不同的分辨率下它不会保持百分比。

有媒体查询建议，但我需要 Internet Explorer 8 的替代品 — 有人猜猜是吗？也许 JavaScript 可以解决我的问题？

更新v2

问题已通过一些 JavaScript、数学和逻辑得到解决。感谢所有贡献者!

Answer 1

您需要在 html、body 和站点 div 上设置 height:100%; 以便 高度:80% 应用于容器 div 时可以理解。当你这样做时， fiddle 对我有用。

http://jsfiddle.net/fvU5d/3/

除非您的意思是您希望容器 div 占站点 div 的 80%，而不是视口(viewport)的 80%。

编辑

试试这个(http://jsfiddle.net/fvU5d/5/):

var newHeight = $(window).height() - 50;
newHeight = newHeight + 'px';
$('.site').css('height',newHeight);