[英]Simple 100% CSS Height example not working, can someone help please
我有一個非常簡單的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>
沒有keno庫:
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
感謝所有的貢獻。
希望這可以幫助其他人。
問候,
史考特
而不是使用height:100%,而是使用height:auto ..它將起作用.. :)
想想你在做什么。 您告訴content
是其元素的100%。 這將是body
。
因此, content
將占據窗口的大小,但是您還有三個帶有高度的div,因此總內容大小將= 100%(主體大小)+頁眉+導航+標題
如果要解決此問題,可以簡單地使內部內容加起來達到100%,然后將百分比調整為所需的百分比。 看一看:
編輯
使用包裝內容中的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>
檢查您更新的小提琴
您需要元素的包裝器,具體取決於您要使用表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;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.