Html 固定标题和 100% 内容高度的 CSS 布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6431881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS layout for fixed header and 100% content height?
提问by NullReference
I'm trying to get a fixed height header and a content area the fills the screen. The content div contains a telerik mvc grid. I've tried a few suggested on stackoverflow but the control that is the content area always seems to size incorrectly because it doesn't take into account the header fixed height, so it will scroll the extra 40px if the header is 40px. Any suggestions?
我试图获得一个固定高度的标题和一个填充屏幕的内容区域。内容 div 包含一个 Telerik mvc 网格。我已经尝试了一些关于 stackoverflow 的建议，但是作为内容区域的控件似乎总是大小不正确，因为它没有考虑标题固定高度，所以如果标题是 40px，它将滚动额外的 40px。有什么建议？
<div id="header">
</div>
<div id="content">
<telerik mvc grid control>
</div>
Css
css
html,body
{
margin:0;
padding:0;
height:100%;
}
#header {
position:absolute;
height: 40px;
left:0;
top:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:40px;
left:0;
width:100%;
height:100%;
background:#eee;
}
UPDATE: Had to manually re-size the grid on load and window re-size. Add
更新：必须在加载时手动重新调整网格大小并重新调整窗口大小。添加
.ClientEvents(events => events.OnLoad("resizeGrid"))
<script type="text/javascript">
window.onresize = function () {
resizeContentArea($("#Grid")[0]);
}
function resizeGrid(e) {
debugger;
resizeContentArea($("#Grid")[0]);
}
function resizeContentArea(element) {
var newHeight = parseInt($(element).outerHeight(), 10) - parseInt($(".t-grid-header", element).outerHeight(), 10) - parseInt($(".t-grid-pager", element).outerHeight(), 10);
$(".t-grid-content", element).css("height", newHeight + "px");
}
</script>
回答by kei
HTML
HTML
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
CSS
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
#wrapper {
width:400px; /*set to desired width*/
height:100%;
margin:auto;
position:relative;
}
#header {
height:40px; /* set to desired height*/
}
#content {
position:absolute;
bottom:0;
top:40px; /*must match the height of #header*/
width:100%;
overflow:auto;
}
回答by peterp
You could place the #header elementinside of the #content element, the content element will take 100% height.
您可以放置在 的#header element内部#content element，内容元素将占据 100% 的高度。
Here's an example, HTML:
这是一个示例，HTML：
<div id="content">
<div id="header">
Header.
</div>
Content Area.
</div>
CSS:
CSS：
body,html {
height:100%;
margin:0;
padding:0;
}
#header {
background:#666;
height:30px;
}
#content {
height:100%;
background:#999;
width:100%;
}
Demo:
演示：
回答by wener
With box-sizingyou can do like
有了box-sizing你可以像
http://jsfiddle.net/Wener/Vat4C/1/
http://jsfiddle.net/Wener/Vat4C/1/
No matter the header is in wrapper or out of wrapper, it will work.
无论标头是在包装器中还是在包装器外，它都可以工作。
Only add :
只添加：
#wrapper
{
box-sizing: border-box;
padding-top: 40px;
margin-top: -40px;
}
#header
{
/* add this if header out of wrapper */
position: relative;
z-index: 9;
}
#content
{
/* remove
position:absolute;
bottom:0px;
top: 40px;*/
/* add */
height: 100%;
}
This is more flexible, the content's position is no absolute, but it need the box-sizingproperty.
这个比较灵活，内容的位置不是绝对的，但是需要box-sizing属性。
About the box-sizing, I defined less function as fallow:
关于box-sizing，我将 less 功能定义为休闲：
.box-sizing(@type: content-box) {
-webkit-box-sizing: @type; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: @type; /* Firefox 1+ */
box-sizing: @type; /* Chrome, IE8+, Opera, Safari 5.1*/
}
.border-box()
{
.box-sizing(border-box);
}
回答by bryanegr
Set the outer to be 100% height, inside make your fixed with header, and auto height for the content should suffice.
将外部设置为 100% 高度，内部使用标题进行固定，内容的自动高度就足够了。
to fix the scrolling, take a look at the overflow porperty. visible will prevent scrolling.
要修复滚动，请查看溢出属性。可见将阻止滚动。
回答by alquatoun
Put a 25px top-margin on the content div and make sure the content div does not include the header.
在内容 div 上放置一个 25px 的上边距，并确保内容 div 不包含标题。
If the content div must include the header, create a new div for your grid using the same properties stated above.
如果内容 div 必须包含标题，请使用上述相同的属性为您的网格创建一个新的 div。
回答by Md. Nazrul Islam
For Vertical Scroll we can use the following and for horizontal scroll just use a div
对于垂直滚动，我们可以使用以下内容，对于水平滚动，只需使用 div
<div class="DataGridXScroll">
@(Html.Telerik().Grid(listCustomerStatus)
.Name("grvSalesAdjustment")
.DataKeys(keys => keys.Add(k => k.CustCode))
.Columns(column =>
{
})
.Selectable()
.Pageable(page => page.PageSize(100))
.Scrollable(scroll => scroll.Height(300))
)
</div>
add the following CSS
添加以下CSS
.DataGridXScroll
{
width: 1000px;
overflow-x: scroll;
text-align:left;
}
This is work in Firefox and other browser. For IE just use the following CSS
这适用于 Firefox 和其他浏览器。对于 IE，只需使用以下 CSS
.t-grid
{
position: static;
overflow:hidden;
}
.t-grid-content
{
overflow-x: hidden;
position:static;
width:100%;
}
.t-grid-header-wrap
{
position:static;
}
.t-grid-content
{
overflow-x: hidden;
}
.t-grid-footer-wrap
{
position:static;
}
This is a very Simple solution and I think every one enjoy it.
这是一个非常简单的解决方案，我认为每个人都喜欢它。
