ඉතිරි තිර අවකාශයේ උස පිරවීමක් කරන්න

සමස්ත තිරයේම උස පිරවීම සඳහා අන්තර්ගතය අවශ්‍ය වෙබ් යෙදුමක මම වැඩ කරමින් සිටිමි.

පිටුවට ශීර්ෂයක් ඇත, එහි ලාංඡනයක් සහ ගිණුම් තොරතුරු අඩංගු වේ. මෙය අත්තනෝමතික උස විය හැකිය. මට අවශ්‍ය වන්නේ අන්තර්ගතයේ ඉතිරි කොටස පහළට පුරවා ගැනීමයි.

මට ශීර්ෂයක් divසහ අන්තර්ගතයක් divඇත. මේ මොහොතේ මම එවැනි පිරිසැලසුමක් සඳහා වගුවක් භාවිතා කරමි:

CSS සහ HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

පිටුවේ සම්පූර්ණ උස පුරවා ඇති අතර අනුචලනය අවශ්‍ය නොවේ.

අන්තර්ගතය තුළ ඇති ඕනෑම දෙයක් සඳහා, සැකසුම top: 0;එය ශීර්ෂයට යටින් තබයි. සමහර විට අන්තර්ගතය සැබෑ වගුවක් වනු ඇත, එහි උස 100% දක්වා සකසා ඇත. headerඇතුළත තැබීමෙන් මෙය contentක්‍රියාත්මක වීමට ඉඩ නොදේ.

භාවිතා නොකර එකම බලපෑමක් ලබා ගැනීමට ක්‍රමයක් tableතිබේද?

යාවත්කාලීන කිරීම:

අන්තර්ගතය තුළ ඇති මූලද්‍රව්‍යයන්ට divප්‍රතිශතයන් සඳහා උස සකසා ඇත. එබැවින් 100% ක් ඇතුළත යමක් divඑය පහළට පුරවනු ඇත. 50% දී මූලද්රව්ය දෙකක් මෙන්.

යාවත්කාලීන 2:

නිදසුනක් ලෙස, ශීර්ෂකය තිරයේ උසින් 20% ක් ගනී නම්, ඇතුළත 50% ක් ලෙස දක්වා ඇති වගුවක් #contentතිරයේ ඉඩ ප්‍රමාණයෙන් 40% ක් ගනී. මෙතෙක්, මේසය තුළ මුළු දේම ඔතා තිබීම එකම දෙයයි.

2015 යාවත්කාලීන කිරීම: නම්‍ය පෙට්ටියේ ප්‍රවේශය

නම්‍යශීලි කොටුව කෙටියෙන් සඳහන් කරමින් තවත් පිළිතුරු දෙකක් තිබේ ; කෙසේ වෙතත්, එය මීට වසර දෙකකට පෙර සිදු වූ අතර ඔවුන් කිසිදු උදාහරණ සපයන්නේ නැත. නම්‍යශීලි කොටුව සඳහා පිරිවිතර දැන් නිසැකවම නිරාකරණය වී ඇත.

සටහන: CSS නම්යශීලී පෙට්ටි පිරිසැලසුම් පිරිවිතර අපේක්ෂක නිර්දේශ අවධියේ පැවතුනද, සියලුම බ්‍රව්සර් එය ක්‍රියාත්මක කර නොමැත. වෙබ්කිට් ක්‍රියාත්මක කිරීම -webkit- සමඟ උපසර්ගය කළ යුතුය; ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් -ms- සමඟ පෙරවදන ලද පිරිවිතරයේ පැරණි අනුවාදයක් ක්‍රියාත්මක කරයි; ඔපෙරා 12.10 පිරිවිතරයේ නවතම අනුවාදය පෙර නොවූ පරිදි ක්‍රියාත්මක කරයි. යාවත්කාලීන අනුකූලතා තත්වයක් සඳහා එක් එක් දේපලෙහි අනුකූලතා වගුව බලන්න.

( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes වෙතින් ලබාගෙන ඇත )

සියලුම ප්‍රධාන බ්‍රව්සර් සහ IE11 + Flexbox සඳහා සහය දක්වයි. IE 10 හෝ ඊට වැඩි, ඔබට FlexieJS shim භාවිතා කළ හැකිය.

වත්මන් සහාය පරීක්ෂා කිරීම සඳහා ඔබට මෙහි ද දැකිය හැකිය: http://caniuse.com/#feat=flexbox

වැඩ කරන උදාහරණය

නම්‍යශීලි කොටුව සමඟ ඔබට ස්ථාවර පේළි, අන්තර්ගත ප්‍රමාණයේ මානයන් හෝ ඉතිරි අවකාශ මානයන් ඇති ඕනෑම පේළි හෝ තීරු අතර පහසුවෙන් මාරු විය හැකිය. මගේ උදාහරණයේ දී මම එහි අන්තර්ගතයට සැණෙකින් ශීර්ෂකය සකසා ඇත (OPs ප්‍රශ්නයට අනුව), ස්ථාවර උස කලාපයක් එකතු කරන්නේ කෙසේදැයි පෙන්වීමට මම පාදකයක් එකතු කර ඉතිරි අවකාශය පිරවීම සඳහා අන්තර්ගත ප්‍රදේශය සකසා ඇත.

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

වඩා, තැටියක CSS දී අයින් දේපල shorthands මෙම අයින්-පංගුව , අයින්-වෙරි , සහ අයින්-පදනම ගුණ අයින් භාණ්ඩ නම්යශීලී ස්ථාපිත කිරීමට. නම්‍යශීලී පෙට්ටි ආකෘතියට මොසිල්ලාට හොඳ හැඳින්වීමක් තිබේ .

CSS හි මෙය කිරීමට හොඳ, හරස් බ්‍රව්සර් ක්‍රමයක් නොමැත. ඔබේ පිරිසැලසුමෙහි සංකීර්ණතා ඇතැයි උපකල්පනය කරමින්, මූලද්‍රව්‍යයේ උස සැකසීමට ඔබ ජාවාස්ක්‍රිප්ට් භාවිතා කළ යුතුය. ඔබ කළ යුතු දේවල සාරය නම්:

Element Height = Viewport height - element.offset.top - desired bottom margin

ඔබට මෙම අගය ලබා ගත හැකි අතර මූලද්‍රව්‍යයේ උස සැකසූ පසු, ඔබට සිදුවීම් හසුරුවන්නන් කවුළු ඔන්ලෝඩ් සහ ඔන්රයිසයිස් යන දෙකටම ඇමිණිය යුතුය.

එසේම, ඔබගේ අන්තර්ගතය දර්ශනපත්‍රයට වඩා විශාල විය හැකි යැයි උපකල්පනය කළහොත්, ඔබට අනුචලනය කිරීමට පිටාර ගැලීම් y සැකසිය යුතුය.

මුල් තනතුර මීට වසර 3 කට පෙරය. මා වැනි මෙම තනතුරට පැමිණෙන බොහෝ අය යෙදුම වැනි පිරිසැලසුම් විසඳුමක් සොයමින් සිටින බව මම අනුමාන කරමි, කෙසේ හෝ ස්ථාවර ශීර්ෂයක්, පාදකයක් සහ සම්පූර්ණ උස අන්තර්ගතය ඉතිරි තිරය අතට ගන්න. එසේ නම්, මෙම ලිපිය උදව් විය හැකිය, එය IE7 + යනාදිය මත ක්‍රියා කරයි.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

මෙන්න එම තනතුරේ කුඩා කොටස් කිහිපයක්:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

සලකුණු කිරීමේදී වගු භාවිතා කරනවා වෙනුවට, ඔබට CSS වගු භාවිතා කළ හැකිය.

සලකුණු කිරීම

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(අදාළ) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 සහ FIDDLE2

මෙම ක්‍රමයේ ඇති වාසි කිහිපයක් නම්:

1) අඩු ලකුණු කිරීම

2) සලකුණු කිරීම වගු වලට වඩා අර්ථාන්විත ය, මන්ද මෙය වගුගත දත්ත නොවේ.

3) බ්‍රව්සර් සහාය ඉතා හොඳයි : IE8 +, සියලුම නවීන බ්‍රව්සර් සහ ජංගම උපාංග ( කැනියස් )

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

CSS ප්‍රවේශය පමණක් (උස දන්නා / ස්ථාවර නම්)

මැද අංගය මුළු පිටුව පුරාම සිරස් අතට විහිදුවාලීමට ඔබට අවශ්‍ය වූ විට, ඔබට calc()CSS3 හි හඳුන්වා දී ඇති ඒවා භාවිතා කළ හැකිය .

අපට ස්ථාවර උස header හා footerමූලද්‍රව්‍ය ඇති බව උපකල්පනය කර sectionටැගය ලබා ගත හැකි සම්පූර්ණ සිරස් උස ලබා ගැනීමට අපට අවශ්‍යය ...

නිරූපණය

උපකල්පනය කළ සලකුණු කිරීම සහ ඔබේ CSS විය යුතුය

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

ඉතින් මෙන්න, මම කරන්නේ, මූලද්‍රව්‍යවල උස එකතු කිරීම සහ ශ්‍රිතය 100%භාවිතා කිරීමෙන් අඩු කිරීම calc()නොවේ.

ඔබ height: 100%;මව් අංග සඳහා භාවිතා කරන බවට වග බලා ගන්න .

භාවිතා කළ: height: calc(100vh - 110px);

කේතය:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

නම්‍යශීලි කොටුව භාවිතා කරමින් සරල විසඳුමක්:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

<body>
  <div>header</div>
  <div class="content"></div>
</body>

කෝඩපන් නියැදිය

විකල්ප විසඳුමක්, අන්තර්ගතය තුළ කේන්ද්‍රගත වූ බෙදීමක් සහිතව

කොහොමද ඔබ හුදෙක් භාවිතය ගැන vhසඳහා කි්රයා කරන view heightදී CSS ...

පහත ඔබ වෙනුවෙන් මා විසින් සාදන ලද කේත ස්නිපටය දෙස බලා එය ක්‍රියාත්මක කරන්න:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

එසේම, මම ඔබ වෙනුවෙන් නිර්මාණය කළ පහත රූපය දෙස බලන්න:

CSS3 සරල මාර්ගය

height: calc(100% - 10px); // 10px is height of your first div...

මේ දිනවල සියලුම ප්‍රධාන බ්‍රව්සර් එයට සහය දක්වයි, එබැවින් ඔබට මිදි වතු බ්‍රව්සර් සඳහා සහය දැක්වීමේ අවශ්‍යතාවයක් නොමැති නම් ඉදිරියට යන්න.

මෙය තනිකරම CSSභාවිතා කිරීමෙන් කළ හැකිය vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

සහ HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

මම එය පරීක්ෂා එය ප්රධාන බ්රව්සරයන් තුළ ක්රියා කරන Chrome, IEසහFireFox

අන්තර්ගතය ඉතා උස වූ විට අනුචලනය කිරීමට ඔබට පහළ කොටස අවශ්‍ය වූ විට පළ කරන ලද විසඳුම් කිසිවක් ක්‍රියා නොකරයි. එම අවස්ථාවේ දී ක්‍රියාත්මක වන විසඳුමක් මෙන්න:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

මුල් ප්‍රභවය: CSS හි පිටාර ගැලීම් හැසිරවීමේදී බහාලුමක ඉතිරිව ඇති උස පිරවීම

JSFiddle සජීවී පෙරදසුන

මම මේ සඳහා පිළිතුරක් සොයමින් සිටිමි. IE8 සහ ඊට ඉහළ ඉලක්ක කිරීමට ඔබට වාසනාව තිබේ නම්, display:tablediv ඇතුළු බ්ලොක් මට්ටමේ මූලද්‍රව්‍යයන් සහිත වගු වල විදැහුම්කරණ නීති ලබා ගැනීමට ඔබට සහ අදාළ අගයන් භාවිතා කළ හැකිය .

ඔබ ඊටත් වඩා වාසනාවන්ත නම් සහ ඔබේ පරිශීලකයින් ඉහළ පෙළේ බ්‍රව්සර් භාවිතා කරන්නේ නම් (නිදසුනක් ලෙස, මෙය ඔබ පාලනය කරන පරිගණකවල අන්තර් ජාල යෙදුමක් නම්, මගේ නවතම ව්‍යාපෘතිය මෙන්), ඔබට CSS3 හි නව නම්යශීලී කොටු පිරිසැලසුම භාවිතා කළ හැකිය !

මට වැඩ කළ දෙය (වෙනත් කොට් division ාශයක් තුළ බෙදීමක් ඇති අතර අනෙක් සියලුම තත්වයන් යටතේ මම උපකල්පනය කරමි) පහළ පෑඩින් 100% දක්වා සැකසීම. එනම්, මෙය ඔබේ css / styleheet එකට එක් කරන්න:

padding-bottom: 100%;

වියාචනය: පිළිගත් පිළිතුර විසඳුම පිළිබඳ අදහස ලබා දෙයි, නමුත් අනවශ්‍ය ආවරණයක් සහ සීඑස්එස් නීති රීති සමඟ එය ටිකක් ඉදිමී ඇති බව මට පෙනේ. පහත දැක්වෙන්නේ ඉතා සුළු CSS රීති සහිත විසඳුමකි.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

ඉහත විසඳුම දර්ශන පුවරු ඒකක සහ නම්‍ය පෙට්ටිය භාවිතා කරයි , එබැවින් IE10 + වේ, ඔබට IE10 සඳහා පැරණි වාක්‍ය ඛණ්ඩය භාවිතා කරයි .

සමඟ සෙල්ලම් කිරීමට කෝඩපන් : කෝඩපන් වෙත සබැඳිය

හෝ මෙය, ප්‍රධාන අන්තර්ගතය පිරී ඉතිරී යන අවස්ථාවකදී අනුචලනය කළ හැකි අය සඳහා : කෝඩපන් වෙත සබැඳිය

දැන් පිළිතුරු ටොන් ගණනක් ඇත, නමුත් height: 100vh;පවතින සිරස් අවකාශය පිරවීම සඳහා අවශ්‍ය වන මූලද්‍රව්‍යයේ වැඩ කිරීමට මම භාවිතා කළෙමි .

මේ ආකාරයෙන්, දර්ශනය හෝ ස්ථානගත කිරීම සමඟ මට සෙල්ලම් කිරීමට අවශ්‍ය නැත. මට පැති තීරුවක් සහ ප්‍රධාන එකක් තිබූ උපකරණ පුවරුවක් සෑදීම සඳහා බූට්ස්ට්‍රැප් භාවිතා කරන විට මෙය ප්‍රයෝජනවත් විය. පසුබිම් වර්ණයක් යෙදීම සඳහා ප්‍රධාන සිරස් අවකාශය දිගු කර පුරවා ගැනීමට මට අවශ්‍ය විය.

div {
    height: 100vh;
}

IE9 සහ ඊට ඉහළ සහය දක්වයි: සබැඳිය බැලීමට ක්ලික් කරන්න

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

සියළුම බුද්ධිමත් බ්‍රව්සර් වලදී, ඔබට සහෝදරයා ලෙස අන්තර්ගතයට පෙර “ශීර්ෂ පා div ය” තැබිය හැකි අතර එකම CSS ක්‍රියා කරයි. කෙසේ වෙතත්, IE7- එම අවස්ථාවේ දී පාවෙන අගය 100% ක් නම් උස නිවැරදිව අර්ථ නිරූපණය නොකරයි, එබැවින් ශීර්ෂකය ඉහත පරිදි අන්තර්ගතයේ තිබිය යුතුය. පිටාර ගැලීම: ස්වයංක්‍රීයව IE මත ද්විත්ව අනුචලන බාර් ඇති කරයි (සෑම විටම දර්ශන පුවරු අනුචලන තීරුව දෘශ්‍යමාන නමුත් අක්‍රීය කර ඇත), නමුත් එය නොමැතිව අන්තර්ගතය පිරී ඉතිරී ගියහොත් එය ක්ලිප් වනු ඇත.

මම ටික වේලාවක් මේ සමඟ පොර බැදූ අතර පහත සඳහන් දෑ සමඟ අවසන් විය:

ඩීඅයිවී අන්තර්ගතය මවුපියන්ට සමාන උසකින් සෑදීම පහසු නමුත් එය මවුපියන්ගේ උස ශීර්ෂයේ උසට වඩා අඩු කිරීම දුෂ්කර බැවින් මම අන්තර්ගතය සම්පූර්ණ උස බවට පත් කිරීමට තීරණය කළ නමුත් එය ඉහළ වම් කෙළවරේ ස්ථානගත කර පෑඩින් එකක් අර්ථ දක්වන්න ශීර්ෂයේ උස ඇති ඉහළට. මේ ආකාරයෙන් අන්තර්ගතය ශීර්ෂකය යටතේ පිළිවෙලට පෙන්වන අතර ඉතිරි මුළු අවකාශය පුරවයි:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

ඔබට පැරණි බ්‍රව්සර් සඳහා සහය නොදක්වා කටයුතු කළ හැකි නම් (එනම්, MSIE 9 හෝ ඊට වැඩි), ඔබට මෙය දැනටමත් W3C CR වන නම්යශීලී කොටු පිරිසැලසුම් මොඩියුලය සමඟ කළ හැකිය . එම මොඩියුලය අන්තර්ගතය නැවත ඇණවුම් කිරීම වැනි වෙනත් හොඳ උපක්‍රම වලටද ඉඩ දෙයි.

අවාසනාවකට මෙන්, MSIE 9 හෝ ඊට අඩු අය මේ සඳහා සහය නොදක්වන අතර ෆයර්ෆොක්ස් හැර අනෙකුත් සෑම බ්‍රව්සරයක් සඳහාම CSS දේපල සඳහා විකුණුම් උපසර්ගය භාවිතා කළ යුතුය. අනෙක් වෙළෙන්දෝ ද උපසර්ගය ඉක්මනින් අතහරිනු ඇතැයි අපේක්ෂා කරමු.

තවත් තේරීමක් වනුයේ CSS ජාලක පිරිසැලසුම වන නමුත් එයට ස්ථාවර බ්‍රව්සර් අනුවාද වලින් ඊටත් වඩා අඩු සහයෝගයක් ඇත. ප්රායෝගිකව, MSIE 10 පමණක් මේ සඳහා සහාය දක්වයි.

යාවත්කාලීන වසර 2020 : සියළු නූතන වෙබ් බ්රව්සර දෙකම සහයෝගය display: flexහා display: grid. අතුරුදහන් වූ එකම එක වන්නේ subgridෆයර්ෆොක්ස් විසින් පමණක් සහාය දක්වන සහායයි. MSIE පිරිවිතරයෙන් සහය නොදක්වන නමුත් ඔබ MSIE විශේෂිත CSS හැක් එකතු කිරීමට කැමති නම්, එය හැසිරීමට සලස්වන්න. මයික්‍රොසොෆ්ට් පවා එය තවදුරටත් භාවිතා නොකළ යුතු යැයි පවසන නිසා MSIE නොසලකා හැරීමට මම යෝජනා කරමි.

CSS ජාල විසඳුම

දේපල bodyසමඟ ඇති display:gridසහ grid-template-rowsභාවිතා කිරීම autoසහ frවටිනාකම නිර්වචනය කිරීම පමණි .

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

ග්‍රිඩ් සඳහා සම්පූර්ණ මාර්ගෝපදේශයක් @ CSS-Tricks.com

ඇයි මේ වගේ නොවන්නේ?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

ඔබට html සහ ශරීරයට (එම අනුපිළිවෙලට) උස ලබා දී ඔබේ මූලද්‍රව්‍යයන්ට උස ලබා දෙන්න?

මා වෙනුවෙන් වැඩ කරයි

display: tableප්‍රදේශය මූලද්‍රව්‍ය දෙකකට (ශීර්ෂකය සහ අන්තර්ගතය) බෙදීමට ඔබට සැබවින්ම භාවිතා කළ හැකිය , එහිදී ශීර්ෂයේ උස වෙනස් විය හැකි අතර අන්තර්ගතය ඉතිරි ඉඩ පුරවයි. මෙය මුළු පිටුව සමඟම ක්‍රියා කරයි, එමෙන්ම ප්‍රදේශය හුදෙක් වෙනත් මූලද්‍රව්‍යයක අන්තර්ගතය ලෙස positionසකසා ඇති relativeවිට absoluteහෝ fixed. මව් මූලද්රව්යයේ ශුන්ය නොවන උස ඇති තාක් කල් එය ක්රියා කරයි.

මෙම ෆෙඩලය සහ පහත කේතය බලන්න:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

 style="height:100vh"

මට ගැටලුව විසඳුවා. මගේ නඩුවේදී මම මෙය අවශ්‍ය අංශයට අදාළ කළෙමි

වින්සන්ට්, මම ඔබේ නව අවශ්‍යතා භාවිතා කර නැවත පිළිතුරු දෙන්නෙමි. අන්තර්ගතය දිගින් දිගට සැඟවී තිබීම ගැන ඔබ තැකීමක් නොකරන බැවින්, ඔබට ශීර්ෂකය පාවීමට අවශ්‍ය නැත. HTML සහ බොඩි ටැග් වල සැඟවී ඇති පිටාර ගැලීම පමණක් තබා #contentඋස 100% දක්වා සකසන්න . ශීර්ෂයේ උස අනුව අන්තර්ගතය සැමවිටම දර්ශනපත්‍රයට වඩා දිගු වනු ඇත, නමුත් එය සඟවනු ඇති අතර අනුචලන තීරු ඇති නොවේ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

මේක උත්සාහ කරන්න

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

මම තරමක් සරල විසඳුමක් සොයා ගතිමි, මන්ද එය මට නිර්මාණ ගැටලුවක් පමණි. පිටුවේ ඉතිරි කොටස රතු පාදයට පහළින් සුදු නොවීමට මට අවශ්‍ය විය. එබැවින් මම පිටු පසුබිම් වර්ණය රතු පැහැයට සකසා ඇත. සහ අන්තර්ගතය පසුබිම් වර්ණය සුදු පැහැයට හැරේ. අන්තර්ගතයේ උස උදා. 20em හෝ 50% පාහේ හිස් පිටුවක් මුළු පිටුවම රතු නොවනු ඇත.

මට එකම ගැටළුවක් ඇති නමුත් ඉහත නම්‍යශීලි කොටු සමඟ වැඩ කිරීමට මට නොහැකි විය. ඒ නිසා මම මගේම අච්චුවක් නිර්මාණය කළෙමි, එයට ඇතුළත් වන්නේ:

• ස්ථාවර ප්‍රමාණයේ මූලද්‍රව්‍යයක් සහිත ශීර්ෂයක්
• පාදකයක්
• ඉතිරි උස ඇති අනුචලන තීරුවක් සහිත පැති තීරුව
• අන්තර්ගතය

මම නම්‍ය පෙට්ටි භාවිතා කළ නමුත් වඩාත් සරල ආකාරයකින්, ගුණාංග ප්‍රදර්ශනය පමණක් භාවිතා කරමින් : නම්‍යශීලී සහ නම්‍ය දිශාව: පේළිය | තීරුව :

මම කෝණික භාවිතා කරන අතර මගේ සංරචක ප්‍රමාණය ඔවුන්ගේ මව් මූලද්‍රව්‍යයෙන් 100% ක් වීමට මට අවශ්‍යය.

වැදගත්ම දෙය නම්, සියළුම දෙමව්පියන්ගේ ප්‍රමාණය සීමා කිරීම සඳහා ප්‍රමාණය (ප්‍රතිශතයකින්) සකස් කිරීමයි. පහත උදාහරණයේ දී myapp උස 100% දර්ශනපත්‍රයේ ඇත.

ප්‍රධාන අංගයට දර්ශනපත්‍රයේ 90% ක් ඇත, මන්ද ශීර්ෂකය සහ පාදකය 5% ක් ඇත.

මම මගේ අච්චුව මෙහි පළ කළෙමි: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

ජංගම යෙදුම සඳහා මම භාවිතා කරන්නේ VH සහ VW පමණි

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

නිරූපණය - https://jsfiddle.net/u763ck92/

පිටසක්වල මහතාගේ අදහස ඉවතට ...

CSS3 සක්‍රීය බ්‍රව්සර් සඳහා ජනප්‍රිය නම්යශීලී කොටුවකට වඩා මෙය පිරිසිදු විසඳුමක් ලෙස පෙනේ.

අන්තර්ගත කොටස වෙත ගණනය () සමඟ අවම උස (උස වෙනුවට) භාවිතා කරන්න.

ගණනය () 100% කින් ආරම්භ වන අතර ශීර්ෂක සහ පාදවල උස අඩු කරයි (පෑඩින් අගයන් ඇතුළත් කිරීමට අවශ්‍යය)

"උස" වෙනුවට "මිනි-උස" භාවිතා කිරීම විශේෂයෙන් ප්‍රයෝජනවත් වන අතර එමඟින් ජාවාස්ක්‍රිප්ට් විදැහුම් අන්තර්ගතය සහ ඇන්ගුලර් 2 වැනි ජේඑස් රාමු සමඟ වැඩ කළ හැකිය. එසේ නොමැතිනම්, ජාවාස්ක්‍රිප්ට් විදැහුම් අන්තර්ගතය දර්ශනය වූ පසු ගණනය කිරීම මඟින් පාදයේ පිටුපසට තල්ලු නොවේ.

50px උස සහ 20px පෑඩින් යන දෙකම භාවිතා කරමින් ශීර්ෂකය සහ පාදකය පිළිබඳ සරල උදාහරණයක් මෙන්න.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

ඇත්ත වශයෙන්ම, ගණිතය සරල කළ හැකි නමුත් ඔබට අදහස ලැබෙනු ඇත ...

බූට්ස්ට්‍රැප් හි:

CSS මෝස්තර:

html, body {
    height: 100%;
}

1) ඉතිරි තිර අවකාශයේ උස පමණක් පුරවන්න:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) ඉතිරි තිර අවකාශයේ උස පුරවා මව් මූලද්‍රව්‍යයේ මැදට අන්තර්ගතය පෙළගස්වන්න:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

මෙය පෙබ්ල්ගේ විසඳුමේ මගේම අවම අනුවාදයයි. IE11 හි වැඩ කිරීමට උපක්‍රමය සොයා ගැනීමට සදහටම ගත විය. (ක්‍රෝම්, ෆයර්ෆොක්ස්, එජ් සහ සෆාරි වලද පරීක්ෂා කර ඇත.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>