ශරීරය බ්‍රව්සරයේ උසින් 100% ක් ඇති කරන්න

ශරීරය බ්‍රව්සරයේ උසින් 100% ක් ඇති කිරීමට මට අවශ්‍යය. මට CSS භාවිතා කර එය කළ හැකිද?

මම සැකසීමට උත්සාහ කළ height: 100%නමුත් එය ක්‍රියාත්මක නොවේ.

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

Html මූලද්‍රව්‍යයේ උස 100% දක්වා සැකසීමට උත්සාහ කරන්න.

html, 
body {
    height: 100%;
}

ශරීරය ගතික දේපල පරිමාණය කරන්නේ කෙසේදැයි එහි මවුපියන් (HTML) දෙස බලයි, එබැවින් HTML මූලද්‍රව්‍යයට එහි උසද තිබිය යුතුය.

කෙසේ වෙතත් ශරීරයේ අන්තර්ගතය ගතිකව වෙනස් වීමට අවශ්‍ය වනු ඇත. අවම උස 100% දක්වා සැකසීම මෙම ඉලක්කය සපුරා ගනු ඇත.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

htmlසහ bodyමූලද්‍රව්‍යයේ උස යන දෙකම සැකසීමට විකල්පයක් ලෙස 100%, ඔබට දර්ශන-ප්‍රතිශත දිග භාවිතා කළ හැකිය.

5.1.2. දර්ශන-ප්‍රතිශත දිග: 'vw', 'vh', 'vmin', 'vmax' ඒකක

දර්ශන-ප්‍රතිශත දිග ආරම්භක අඩංගු බ්ලොක් ප්‍රමාණයට සාපේක්ෂව වේ. ආරම්භක අඩංගු කොටසෙහි උස හෝ පළල වෙනස් වූ විට ඒවා ඒ අනුව පරිමාණය කෙරේ.

මෙම අවස්ථාවෙහිදී, ඔබට අගය භාවිතා කළ හැකිය 100vh- එය දර්ශනපත්‍රයේ උස වේ.

උදාහරණය මෙතැන

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

බොහෝ නවීන බ්‍රව්සර් වල මෙය සහය දක්වයි - සහාය මෙහි සොයාගත හැකිය .

ඔබට පසුබිම් රූපයක් තිබේ නම් ඔබට ඒ වෙනුවට මෙය සැකසීමට අවශ්‍ය වනු ඇත:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

අන්තර්ගතය දර්ශනපත්‍රයට වඩා උස වන විට ඔබේ ශරීර ටැගය දිගටම වර්ධනය වීමට ඉඩ සලසන බවත්, ඔබ අනුචලනය කිරීමට පටන් ගන්නා විට පසුබිම් රූපය අඛණ්ඩව / අනුචලනය / ඕනෑම දෙයක් දිගටම කරගෙන යන බවත් මෙය සහතික කරයි.

ඔබ IE6 සහාය ඇති නම්, ඔබ තුළ විරසකයක් නඩත්තු කෙරෙන තැනට වගබලා ගැනීමත් කිරීමට ක්රමයක් සොයා ගැනීමට අවශ්ය වනු ඇත මතක තබා ගන්න height:100%ශරීරය, IE6 අමතා, සඳහා heightමෙන් min-heightකෙසේ හෝ.

ඔබට ශරීරයේ ආන්තිකය තබා ගැනීමට අවශ්‍ය නම් සහ අනුචලන තීරු අවශ්‍ය නොවන්නේ නම්, පහත දැක්වෙන css භාවිතා කරන්න:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

සැකසීමෙන් body {min-height:100%} ඔබට අනුචලන තීරු ලැබේ.

දී බරපතළ සංවාදයක් බලන්න http://jsbin.com/aCaDahEK/2/edit?html,output .

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

විවිධ අවස්ථා පරීක්ෂා කිරීමෙන් පසුව, මෙය හොඳම විසඳුම බව මම විශ්වාස කරමි:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

බව එය ගතික ය htmlසහ bodyඒවායේ අන්තර්ගතයන් පිටාර ගලා නම් අංග ස්වයංක්රීයව පුළුල් වනු ඇත. ෆයර්ෆොක්ස්, ක්‍රෝම් සහ අයිඊ 11 හි නවතම අනුවාදයෙන් මම මෙය පරීක්ෂා කළෙමි.

මෙහි සම්පූර්ණ ප්‍රහේලිකාව බලන්න (ඔබ මේසයට වෛර කරන්නන් සඳහා, ඔබට සෑම විටම එය භාවිතා කළ හැකිය.

https://jsfiddle.net/71yp4rh1/9/

එසේ පැවසීමත් සමඟ, මෙහි පළ කර ඇති පිළිතුරු සමඟ ගැටළු කිහිපයක් තිබේ .

html, body {
    height: 100%;
}

ඉහත CSS භාවිතා කිරීමෙන් මෙහි අන්තර්ගතය පිටාර ගැලුවහොත් html සහ ශරීර මූලද්‍රව්‍යය ස්වයංක්‍රීයව ප්‍රසාරණය නොවනු ඇත:

https://jsfiddle.net/9vyy620m/4/

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

html {
    height: 100%;
}

body {
    min-height: 100%;
}

ඉහත පෙන්වා ඇති පරිදි ශරීරයේ අවම උස 100% ක් තැබීම වෙනත් ගැටළු ඇති කරයි. ඔබ මෙය කරන්නේ නම්, මෙහි පෙන්වා ඇති පරිදි ළමා කොට් div ාශයක් හෝ මේසයක් ප්‍රතිශතයක උසකින් යුක්ත බව ඔබට සඳහන් කළ නොහැක:

https://jsfiddle.net/aq74v2v7/4/

මෙය යමෙකුට උපකාරී වේ යැයි සිතමි. මම හිතන්නේ බ්‍රව්සර් මෙය වැරදි ලෙස හසුරුවයි. දරුවන් පිටාර ගැලුවහොත් ශරීරයේ උස ස්වයංක්‍රීයව විශාල වන බව මම බලාපොරොත්තු වෙමි. කෙසේ වෙතත්, ඔබ 100% උස සහ 100% පළල භාවිතා කරන විට එය සිදු නොවන බව පෙනේ.

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

html, body{
    min-height:100%;
    overflow:auto;
}

වර්තමාන CSS සමඟ වඩා හොඳ විසඳුමක්

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

වචනාර්ථයෙන් ආරම්භයේ දී මා භාවිතා කරන සෑම CSS ගොනුවක්ම පහත දැක්වේ:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

0 හි ආන්තිකය මඟින් HTML සහ BODY මූලද්‍රව්‍යයන් බ්‍රව්සරය ස්වයංක්‍රීයව ස්ථානගත කර නොමැති අතර ඒවායේ වමට හෝ දකුණට යම් ඉඩක් තිබිය යුතුය.

බ්‍රවුසරයේ පෙරනිමි නිසා HTML සහ BODY මූලද්‍රව්‍ය ස්වයංක්‍රීයව ඒවායේ ඇති සියල්ල පහළට හෝ දකුණට තල්ලු නොවන බව 0 පෑඩින් කිරීම සහතික කරයි.

පළල සහ උස ප්‍රභේද 100% ක් ලෙස සකසා ඇති අතර, බ්‍රවුසරය ස්වයංක්‍රීයව ආන්තික ආන්තිකයක් හෝ පෑඩින් එකක් ලබා ගැනීමේ අපේක්ෂාවෙන් ඒවා ප්‍රමාණය වෙනස් නොකරන බවට සහතික වේ. බොහෝ විට ඒවා අවශ්‍ය නොවනු ඇත.

මෙම විසඳුම ද මම පළමු වසර කිහිපයකට පෙර HTML හා CSS මත ආරම්භ කළේ විට වැනි, ඔබ ඔබේ පළමු දිය යුතු නැහැ, ඒ කියන්නෙ <div>ඉතා margin:-8px;එය බ්රවුසරය ඇති වින්ඩෝව මුල්ලක ගැලපෙන කළ යුතු බව ය.

මම පළ කිරීමට පෙර, මගේ අනෙක් පූර්ණ තිර CSS ව්‍යාපෘතිය දෙස බැලූ අතර, මා එහි භාවිතා කළ සියල්ලම සාධාරණ body{margin:0;}හා වෙන කිසිවක් නොමැති බව මට පෙනී ගියේය .

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

මෙහි:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

අවශ්‍ය නම් ඔබට JS ද භාවිතා කළ හැකිය

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

උත්සාහ කරන්න

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

කරුණාකර මෙය පරීක්ෂා කරන්න:

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

නැතහොත් නව ක්‍රමයක් උත්සාහ කරන්න Viewport උස:

html, body { width: 100vw; height: 100vh;}

දර්ශනපථය: ඔබ දර්ශන පථය භාවිතා කරන්නේ නම් ඕනෑම ප්‍රමාණයේ තිර අන්තර්ගතයක් තිරයේ සිට ඉහළට පැමිණේ.

ඔබේම CSS ගොනුව සංස්කරණය කිරීමේ කාර්යය ඔබට අවශ්‍ය නැතිනම් උස නීති රීති ඔබ විසින්ම නිර්වචනය කරන්නේ නම්, වඩාත් සාමාන්‍ය CSS රාමු මඟින් මෙම ගැටළුව විසඳන්නේ ශරීර මූලද්‍රව්‍යය මුළු පිටුවේම පුරවා ගැනීමත් සමඟය. දර්ශනපත්‍රවල ප්‍රමාණය.

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

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

සියලුම ප්‍රධාන බ්‍රව්සර් සඳහා ක්‍රියා කරයි: FF, Chrome, Opera, IE9 +. පසුබිම් රූප සහ ශ්‍රේණි සමඟ ක්‍රියා කරයි. අනුචලන තීරු අන්තර්ගත අවශ්‍යතා ලෙස ලබා ගත හැකිය.

මම මෙය භාවිතා කරමි

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

<html>
    <body>
    </body>
</html>

බ්‍රව්සරය භාවිතා කරනු ඇති min-height: 100vhඅතර කෙසේ හෝ බ්‍රව්සරය ටිකක් පැරණි නම් min-height: 100%එය පසුබෑමක් වනු ඇත.

මෙම overflow: autoඔබ (උදාහරණයක් ලෙස ජංගම ප්රමාණය දක්වා) තිරය නැවත ප්රමාණය විට ශරීරය හා html ඔවුන්ගේ උස පුළුල් කිරීමට අවශ්ය නම් අවශ්ය වන්නේ

CSS පේළි 1 ක් සමඟ පමණි… ඔබට මෙය කළ හැකිය.

body{ height: 100vh; }

සියලුම පිළිතුරු 100% නිවැරදි හා හොඳින් පැහැදිලි කර ඇත, නමුත් එයට ප්‍රතිචාර දැක්වීමට මම හොඳ සහ ඉතා සරල දෙයක් කළෙමි.

මෙහි මූලද්‍රව්‍යය දර්ශන වරායේ 100% ක උසකින් යුක්ත වන නමුත් ජංගම දර්ශනය දෙස බලන විට එය විශේෂයෙන් පෝට්රේට් දර්ශනය (ජංගම) මත නොපෙනේ, එබැවින් දර්ශන වරාය කුඩා වන විට මූලද්‍රව්‍යය බිඳ වැටී එකිනෙක අතිච්ඡාදනය වේ. එබැවින් මෙහි සුළු ප්‍රතිචාරයක් දැක්වීමට කේතය වේ. යමෙකු මෙයින් උදව් ලබා ගනී යැයි බලාපොරොත්තු වෙමි.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

මෙන්න JSfiddle Demo.

මෙන්න යාවත්කාලීන කරන්න

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

පතුලේ ඇති අමතර ඉඩ ගැන: ඔබේ පිටුව ASP.NET යෙදුමක් ද? එසේ නම්, ඔබේ සලකුණු කිරීමේදී සෑම දෙයක්ම පාහේ ඔතා තිබේ. පෝරමය ද මෝස්තර කිරීමට අමතක නොකරන්න. overflow:hidden;පෝරමයට එකතු කිරීමෙන් පතුලේ ඇති අමතර ඉඩ ඉවත් කළ හැකිය.

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

CSS3 නව ක්‍රමයක් ඇත.

 height:100vh

එය ViewPort 100% ක උසකට සමාන කරයි.

එබැවින් ඔබේ කේතය විය යුතුය

 body{
 height:100vh; 
 }