स्क्रॉल करने योग्य सामग्री के साथ फिक्स्ड हेडर, फुटर

Question 1

मैं स्क्रॉल करने योग्य सामग्री के साथ फिक्स्ड हेडर, फुटर कैसे प्राप्त कर सकता हूं? कुछ इस पेज की तरह । मैं सीएसएस प्राप्त करने के लिए स्रोत को देख सकता हूं, लेकिन मैं केवल न्यूनतम सीएसएस और एचटीएमएल जानना चाहता हूं मुझे यह काम करने की आवश्यकता है।

Question 2

कुछ इस तरह

<html>
  <body style="height:100%; width:100%">
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div>
  </body>
</html>

Question 3

यदि आप लचीले बक्से का समर्थन करने वाले ब्राउज़रों को लक्षित कर रहे हैं, तो आप निम्न कार्य कर सकते हैं .. http://jsfiddle.net/meyertee/AH3pE/

एचटीएमएल

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">Body</div>
    <footer><h3>Footer</h3></footer>
</div>

सीएसएस

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

header {
    flex-shrink: 0;
}
.body{
    flex-grow: 1;
    overflow: auto;
    min-height: 2em;
}
footer{
    flex-shrink: 0;
}

अपडेट: लचीले बक्से के ब्राउज़र समर्थन के
लिए "क्या मैं उपयोग कर सकता हूं" देखें ।

Question 4

दृष्टिकोण 1 - फ्लेक्सबॉक्स

यह ज्ञात और अज्ञात दोनों ऊंचाई तत्वों के लिए बहुत अच्छा काम करता है। बाहरी डिव को सेट करना height: 100%;और डिफ़ॉल्ट marginको रीसेट करना सुनिश्चित करें body। ब्राउज़र समर्थन तालिका देखें ।

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

स्निपेट का विस्तार करें

दृष्टिकोण 2 - सीएसएस तालिका

ज्ञात और अज्ञात दोनों ऊंचाई तत्वों के लिए। यह IE8 सहित विरासत ब्राउज़रों में भी काम करता है।

jsFiddle

कोड स्निपेट दिखाएं

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
.header, .content, .footer {
  display: table-row;
}
.header, .footer {
  background: silver;
}
.inner {
  display: table-cell;
}
.content .inner {
  height: 100%;
  position: relative;
  background: pink;
}
.scrollable {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  overflow: auto;
}

<div class="wrapper">
  <div class="header">
    <div class="inner">Header</div>
  </div>
  <div class="content">
    <div class="inner">
      <div class="scrollable">
        <div style="height:1000px;">Content</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">Footer</div>
  </div>
</div>

स्निपेट का विस्तार करें

दृष्टिकोण 3 - `calc()`

यदि शीर्ष लेख और पाद लेख निश्चित ऊंचाई हैं, तो आप CSS का उपयोग कर सकते हैं calc()।

jsFiddle

कोड स्निपेट दिखाएं

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 50px;
  background: silver;
}
.content {
  height: calc(100% - 100px);
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

स्निपेट का विस्तार करें

दृष्टिकोण 4 - सभी के लिए%

यदि शीर्ष लेख और पाद लेख ऊँचाई ज्ञात हैं, और वे प्रतिशत भी हैं, तो आप केवल सरल गणित कर सकते हैं जो उन्हें 100% ऊँचाई पर एक साथ बनाते हैं।

कोड स्निपेट दिखाएं

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

स्निपेट का विस्तार करें

jsFiddle

Question 5

अब हमें CSS ग्रिड मिल गई है। 2019 में आपका स्वागत है।

/* Required */
body {
   margin: 0;
   height: 100%;
}

#wrapper {
   height: 100vh;
   display: grid;
   grid-template-rows: 30px 1fr 30px;
}

#content {
   overflow-y: scroll;
}

/* Optional */
#wrapper > * {
   padding: 5px;
}

#header {
   background-color: #ff0000ff;
}

#content {
   background-color: #00ff00ff;
}

#footer {
   background-color: #0000ffff;
}

<body>
   <div id="wrapper">
      <div id="header">Header Content</div>
      <div id="content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="footer">Footer Content</div>
   </div>
</body>

स्निपेट का विस्तार करें

Question 6

2013 तक: यह मेरा दृष्टिकोण होगा। jsFiddle:

एचटीएमएल

<header class="container global-header">
    <h1>Header (fixed)</h1>
</header>

<div class="container main-content">
    <div class="inner-w">
        <h1>Main Content</h1>
    </div><!-- .inner-w -->
</div> <!-- .main-content -->

<footer class="container global-footer">
    <h3>Footer (fixed)</h3>
</footer>

एससीएसएस

// User reset

* { // creates a natural box model layout
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} // asume normalize.css


// structure

.container {
    position: relative;
    width: 100%;
    float: left;
    padding: 1em;
}


// type

body {
    font-family: arial;   
}

.main-content {
    h1 {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: .2em;
    }
} // .main-content


// style

    // variables
    $global-header-height: 8em;
    $global-footer-height: 6em;

.global-header {
    position: fixed;
    top: 0; left: 0;
    background-color: gray;
    height: $global-header-height;
}

.main-content {
    background-color: orange;
    margin-top: $global-header-height;
    margin-bottom: $global-footer-height;
    z-index: -1; // so header will be on top
    min-height: 50em; // to make it long so you can see the scrolling
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: $global-footer-height;
    background-color: gray;
}

Question 7

यहाँ मेरे लिए क्या काम किया है। मुझे एक मार्जिन-बॉटम जोड़ना था ताकि पाद मेरी सामग्री को न खाए:

header {
  height: 20px;
  background-color: #1d0d0a;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hide;
}

content {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}

footer {
  position: fixed;
  bottom: 0px;
  overflow: hide;
  width: 100%;
}

Question 8

यह सीएसएस ग्रिड का उपयोग करके मेरे लिए ठीक काम करता है। प्रारंभ में कंटेनर को ठीक करें और फिर overflow-y: auto;केंद्र सामग्री के लिए दें जिसमें स्क्रॉल करना होगा और हेडर और फुटर के अलावा।

.container{
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-rows: 5em auto 3em;
}

header{
   grid-row: 1;  
    background-color: rgb(148, 142, 142);
    justify-self: center;
    align-self: center;
    width: 100%;
}

.body{
  grid-row: 2;
  overflow-y: auto;
}

footer{
   grid-row: 3;
   
    background: rgb(110, 112, 112);
}

<div class="container">
    <header><h1>Header</h1></header>
    <div class="body">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <footer><h3>Footer</h3></footer>
</div>

स्निपेट का विस्तार करें

स्क्रॉल करने योग्य सामग्री के साथ फिक्स्ड हेडर, फुटर

दृष्टिकोण 1 - फ्लेक्सबॉक्स

दृष्टिकोण 2 - सीएसएस तालिका

दृष्टिकोण 3 - calc()

दृष्टिकोण 4 - सभी के लिए%

दृष्टिकोण 3 - `calc()`