फिक्स्ड हेडर और 100% सामग्री ऊंचाई के लिए सीएसएस लेआउट?

Question

मैं एक निश्चित ऊंचाई शीर्षलेख प्राप्त करने की कोशिश कर रहा हूं और एक सामग्री क्षेत्र स्क्रीन भरता है। सामग्री div में एक टेलरिक एमवीसी ग्रिड होता है। मैंने स्टैक ओवरफ्लो पर सुझाए गए कुछ सुझावों का प्रयास किया है लेकिन सामग्री क्षेत्र जो नियंत्रण हमेशा गलत लगता है क्योंकि यह हेडर निश्चित ऊंचाई को ध्यान में रखता नहीं है, इसलिए हेडर 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

यहाँ एक उदाहरण, एचटीएमएल हैएचटीएमएल

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

सीएसएस

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

बाहरी सेट 100% ऊंचाई होने के लिए, अंदर अपने हेडर के साथ तय हो गई, और ऑटो ऊंचाई बनाने के लिए सामग्री पर्याप्त होना चाहिए। स्क्रॉलिंग को ठीक करने के लिए

, अतिप्रवाह छिद्र पर एक नज़र डालें। दृश्यमान स्क्रॉलिंग को रोक देगा।

Answer 3

सामग्री div पर 25px शीर्ष-मार्जिन रखें और सुनिश्चित करें कि सामग्री div में हेडर शामिल नहीं है।

यदि सामग्री div में शीर्षलेख शामिल होना चाहिए, तो ऊपर बताए गए समान गुणों का उपयोग करके अपने ग्रिड के लिए एक नया div बनाएं।

Answer 4

आप #header element#content element के अंदर रख सकते हैं, सामग्री तत्व 100% ऊंचाई लेगा।

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

सीएसएस:

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 5

स्क्रॉल के लिए हम उपयोग कर सकते हैं के बाद और क्षैतिज स्क्रॉल के लिए सिर्फ एक 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> 

का उपयोग निम्नलिखित सीएसएस जोड़ने

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

यह फ़ायरफ़ॉक्स और अन्य ब्राउज़र में काम करता है। आईई के लिए बस निम्नलिखित सीएसएस

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

यह एक बहुत ही सरल समाधान है और मुझे लगता है कि हर कोई इसका आनंद लेता है।

Answer 6

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(@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); 
}