【发布时间】：2014-04-25 11:53:14
【问题描述】：
我有一个非常简单的 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();
});
});
当然，您需要包含剑道库才能使剑道部分工作。
<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
感谢所有做出贡献的人。
希望这可以帮助其他人。
问候，
斯科特
【问题讨论】：
-
100%是相对于整个 body 元素而不是剩余空间计算的，在前 3 个元素占据了它们的空间之后！ -
height:auto 对你有用吗？
-
没有自动没有工作...
-
我想要做的是 content 元素占据 body 元素剩余空间的 100%，所以我可以将项目放入其中并让它们占据 100% 的剩余空间...
标签： html css kendo-ui height splitter