Bố cục CSS cho tiêu đề cố định và chiều cao nội dung 100%?

Question

Tôi đang cố gắng lấy tiêu đề chiều cao cố định và khu vực nội dung sẽ lấp đầy màn hình. Div nội dung chứa một lưới mvc telerik. Tôi đã thử một vài gợi ý trên stackoverflow nhưng kiểm soát đó là khu vực nội dung luôn luôn có vẻ kích thước không chính xác bởi vì nó không đưa vào tài khoản chiều cao cố định tiêu đề, do đó, nó sẽ di chuyển thêm 40px nếu tiêu đề là 40px. Bất kỳ đề xuất?

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

UPDATE: Đã phải tự thay đổi kích thước lưới vào tải và cửa sổ lại kích thước. Thêm

.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

Đặt bên ngoài là 100% chiều cao, bên trong làm cố định với tiêu đề, và chiều cao tự động của bạn đối với nội dung là đủ.

để sửa lỗi cuộn, hãy xem độ xốp tràn. hiển thị sẽ ngăn cuộn.

Answer 3

Đặt lề trên 25px trên div nội dung và đảm bảo div nội dung không bao gồm tiêu đề.

Nếu div nội dung phải bao gồm tiêu đề, hãy tạo một div mới cho lưới của bạn bằng cách sử dụng các thuộc tính giống như đã nêu ở trên.

Answer 4

Bạn có thể đặt #header element bên trong của #content element, yếu tố nội dung sẽ mất 100% chiều cao.

Dưới đây là một ví dụ, 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%; 
} 

Demo:

http://jsfiddle.net/Rz2tN/

Answer 5

Đối Vertical Scroll chúng ta có thể sử dụng sau đây và cho cuộn ngang chỉ cần sử dụng một 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> 

thêm dòng sau CSS

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

Đây là công việc trong Firefox và trình duyệt khác. Đối với IE, chỉ cần sử dụng CSS sau đây

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

Đây là giải pháp rất đơn giản và tôi nghĩ mọi người đều thích nó.

Answer 6

Với box-sizing bạn có thể làm như

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

Không có vấn đề tiêu đề là trong wrapper hoặc ra khỏi wrapper, nó sẽ làm việc.

Chỉ thêm:

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

này là linh hoạt hơn, vị trí của nội dung là không tuyệt đối, nhưng nó cần box-sizing tài sản.

Về box-sizing, tôi xác định rõ ràng chức năng như bỏ hoang:

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