Question

我正在尝试获得固定高度的标题和填充屏幕的内容区域。内容div包含telerik mvc网格。我已经在stackoverflow上尝试了一些建议，但是作为内容区域的控件总是看起来不正确，因为它没有考虑标题固定高度，所以如果标题是40px它将滚动额外的40px。有什么建议？

<div id="header">
</div>
<div id="content">
   <telerik mvc grid control>
</div>

的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; 
  }

更新：必须在加载和窗口重新调整大小时手动重新调整网格大小。添加

 .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>

Answer 1

DEMO

<强> HTML

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">CONTENT</div>
</div>

<强> 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;
}

Answer 2

您可以将#header element置于#content element内，内容元素将占据100％的高度。

这是一个例子，HTML：

<div id="content">
     <div id="header">
        Header.
    </div>
    Content Area.
</div>

CSS：

body,html {
    height:100%;
    margin:0;
    padding:0;
}

#header {
    background:#666;
    height:30px;
}

#content {
    height:100%;
    background:#999;
    width:100%;
}

演示：

http://jsfiddle.net/Rz2tN/

Answer 3

使用box-sizing，你可以这样做

http://jsfiddle.net/Wener/Vat4C/1/

无论标题是在包装中还是在包装之外，它都可以正常工作。

仅添加：

#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%;
}

这更灵活，内容的位置不是绝对的，但它需要box-sizing属性。

关于box-sizing，我将较少的功能定义为休闲：

.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);
}

Answer 4

将外部设置为100％高度，内部使用标题固定，内容的自动高度应该足够。

修复滚动，看一下溢出的属性。可见会阻止滚动。

Answer 5

在内容div上放置25px的上边距，并确保内容div不包含标题。

如果内容div必须包含标题，请使用上述相同的属性为网格创建一个新的div。

Answer 6

对于Vertical Scroll，我们可以使用以下内容，而对于水平滚动，只需使用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>

添加以下 CSS

.DataGridXScroll
{
    width: 1000px;   
    overflow-x: scroll;
    text-align:left;
}

这适用于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;
}

这是一个非常简单的解决方案，我想每个人都喜欢它。

固定标题和100％内容高度的CSS布局？

6 个答案: