Question

我有一个非常简单的CSS 100％示例，根据我的理解逻辑上应该可行，但不是。有人可以解释一下原因吗？

HTML：

<div id="header">header</div>
<div id="nav">Nav</div>
<div id="title">title</div>
<div id="content">
    Content
</div>

CSS：

html {
    height:100%;
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    padding: 0;
    margin: 0;
}
#header {
    background-color:red;
    padding: 0;
    margin: 0;
}
#nav {
    background-color:gray;
    padding: 0;
    margin: 0;
}
#title {
    background-color:azure;
    padding: 0;
    margin: 0;
}
#content {
    background-color:antiquewhite;
    height:100%;
    padding: 0;
    margin: 0;
}

据我了解，应该没有垂直滚动条。然而有人出现了。

这是一个小提示：http://jsfiddle.net/codeowl/9wABW/

感谢您的时间，

此致

斯科特

更新

这是我最终做的事情：

我开发了如下堆叠和填充方法。不幸的是，小提琴有一个问题，我试图访问java脚本中的窗口，所以我只能粘贴代码：

CSS：

#header {
    background-color:red;
}
#nav {
    background-color:gray;
}
#title {
    background-color:azure;
}
#content {
    background:green;
}

HTML：

<div id="header" class="stack-y">header</div>
<div id="nav" class="stack-y">Nav</div>
<div id="title" class="stack-y">title</div>
<div id="content" class="fill-y">
    <div data-role="splitter"
        data-panes="[
        { scrollable: false, collapsible: true, size: '300px' },
        { scrollable: false, collapsible: true }
        ]" 
        class="fill-y">
        <div>
            Left Pane
        </div>
        <div>
            Right Pane
        </div>
    </div>
    <div class="stack-y">Test Content</div>
</div>

Java脚本：

$(document).ready(function () {
    var fResizeLayout = null;

    fResizeLayout = function() {
        var aFillElements = $('.fill-y');
        $.each(aFillElements, function (i, e) {
            var p = null,
                iPY = 0,
                iY = 0,
                iH = 0;
            e = $(e);
            p = e.parent();
            if (p.prop('tagName') === 'body') { iPY = $(window).height(); }
            else { iPY = p.innerHeight(); }
            e.siblings('.stack-y').each(function () {
                iY += $(this).outerHeight(true);
            });
            iH = (iPY - iY - parseInt(e.css('border-top-width'), 10) - parseInt(e.css('border-bottom-width'), 10));
            e.height(iH);
        });
        kendo.resize($('#content'));
    };

    kendo.init($('#content'));
    fResizeLayout();

    $(window).on('resize', function () {
        if (this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            $(this).trigger('resizeEnd');
        }, 200);
    });

    $(window).on('resizeEnd', function () {
        fResizeLayout();
    });            
});

当然，您需要包含Kendo部分的kendo库才能工作。

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

没有基诺图书馆：

HTML：

<div id="header" class="stack-y">header</div>
<div id="nav" class="stack-y">Nav</div>
<div id="title" class="stack-y">title</div>
<div id="content" class="fill-y">
    Test Fill Content
</div>
<div class="stack-y">Test Stacked Content</div>

Java脚本：

$(document).ready(function () {
    var fResizeLayout = null;

    fResizeLayout = function() {
        var aFillElements = $('.fill-y');
        $.each(aFillElements, function (i, e) {
            var p = null,
                iPY = 0,
                iY = 0,
                iH = 0;
            e = $(e);
            p = e.parent();
            if (p.prop('tagName') === 'body') { iPY = $(window).height(); }
            else { iPY = p.innerHeight(); }
            e.siblings('.stack-y').each(function () {
                iY += $(this).outerHeight(true);
            });
            iH = (iPY - iY - parseInt(e.css('border-top-width'), 10) - parseInt(e.css('border-bottom-width'), 10));
            e.height(iH);
        });
    };

    fResizeLayout();

    $(window).on('resize', function () {
        if (this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function () {
            $(this).trigger('resizeEnd');
        }, 200);
    });

    $(window).on('resizeEnd', function () {
        fResizeLayout();
    });            
});

感谢Carlos的resizeEnd部分：https://stackoverflow.com/a/12692647/2109254

感谢所有贡献者。

希望这可以帮助别人。

此致

斯科特

Answer 1

而不是使用高度：100％使用高度：自动...它将工作..：）

Answer 2

想想你在做什么。你告诉content 100％包含元素。这将是body。

因此，content将占用窗口的大小，但您仍然有三个其他高度的div，因此总内容大小将= 100％（正文大小）+标题+导航+标题

如果你想解决这个问题，你可以简单地将内部内容加起来达到100％并将百分比调整为你需要的百分比。看看：

http://jsfiddle.net/9wABW/3/

Answer 3

修改

This将使用包装内容中的display：table-row准确提供您要查找的布局。

html { height:100%; padding: 0; margin: 0; } body { height: 100%; padding: 0; margin: 0; } #header { background-color:red; padding: 0; margin: 0; display: table-row; height:1px; } #nav { background-color:gray; padding: 0; margin: 0; display:table-row; height:1px; } #title { background-color:azure; padding: 0; margin: 0; display:table-row; height:1px; } #content { background:green; padding: 0; margin: 0; display:table-row; } #wrapper {height:100%;width:100%;margin:0;padding:0;display:table} <div id="wrapper"> <div id="header">header</div> <div id="nav">Nav</div> <div id="title">title</div> <div id="content"> Content </div> </div>

检查updated fiddle

您需要元素的包装器，具体取决于您可能想要使用表css属性的特定布局（显示：table-row等）。

<div id="wrapper"> <div id="header">header</div> <div id="nav">Nav</div> <div id="title">title</div> <div id="content"> Content </div> </div> html { height:100%; padding: 0; margin: 0; } body { height: 100%; padding: 0; margin: 0; } #header { background-color:red; padding: 0; margin: 0; } #nav { background-color:gray; padding: 0; margin: 0; } #title { background-color:azure; padding: 0; margin: 0; } #content { padding: 0; margin: 0; } #wrapper {height:100%;margin:0;padding:0;background-color:antiquewhite;}

简单的100％CSS高度示例不起作用，有人可以帮忙

3 个答案: