2150

මට තීරු දෙකක් සහිත පිරිසැලසුමක් ඇත - වම් divසහ දකුණ div.

දකුණට divඅළු පැහැයක් ඇති අතර background-colorඑය පරිශීලකයාගේ බ්‍රව්සර් කවුළුවේ උස අනුව සිරස් අතට පුළුල් කිරීමට මට අවශ්‍යය. මේ වන විට එහි background-colorඅවසන් අන්තර්ගතයේ කෙළවර වේ div.

මම උත්සාහ කලා height:100%, min-height:100%;ආදිය,

html css height

— මයික්
source

7

ඔබට මෙම ප්‍රශ්නය ප්‍රයෝජනවත් වේ. Stackoverflow.com/questions/1366548/…

— අයිවන් නෙවොස්ට්‍රෙව්

යාමට හොඳ ක්‍රමයක්, නමුත් vh, vw යනාදී ඒකක දෝෂ සහිත බව දන්නා කරුණකි. ඔබට අවශ්‍ය නම් මෙම සැහැල්ලු js විකල්පයක් ඇත: joaocunha.github.io/vunit

— තියුණු

heightප්‍රතිශත අගයන් සහිත CSS දේපල පිළිබඳ සරල හා පැහැදිලි පැහැදිලි කිරීමක් මෙන්න : stackoverflow.com/a/31728799/3597276

— මයිකල් බෙන්ජමින්

5

ඔබට උස භාවිතා කළ හැකිය: 100vh; css property

— විෂ්ණු චෞහාන්

2847

CSS 3 මිනුම් ඒකක කිහිපයක් ඇත:

Viewport-Percentage (හෝ Viewport- සාපේක්ෂ) දිග

Viewport-ප්‍රතිශත දිග යනු කුමක්ද?

ඉහත සම්බන්ධිත W3 අපේක්ෂක නිර්දේශයෙන්:

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

මෙම ඒකක vh(දර්ශනපථයේ උස), vw(දර්ශනපථ පළල), vmin(දර්ශනපතේ අවම දිග) සහ vmax(දර්ශනපත්‍රයේ උපරිම දිග) වේ.

බෙදුම්කරුවෙකු බ්‍රව්සරයේ උස පිරවීම සඳහා මෙය භාවිතා කරන්නේ කෙසේද?

මෙම ප්‍රශ්නය සඳහා, අපට මෙය භාවිතා කළ හැකිය vh: 1vhදර්ශනපත්‍රයේ උසින් 1% ට සමාන වේ. එනම් 100vh, DOM ගසෙහි මූලද්‍රව්‍යය පිහිටා ඇති ස්ථානය කුමක් වුවත්, බ්‍රව්සර් කවුළුවේ උසට සමාන වේ:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

මෙය වචනාර්ථයෙන් අවශ්‍ය සියල්ලම වේ. මෙන්න මේ සඳහා JSFiddle උදාහරණයක් .

මෙම නව ඒකක සඳහා සහය දක්වන බ්‍රව්සර් මොනවාද?

ඔපෙරා මිනි හැරුණු විට යාවත්කාලීන සියලුම ප්‍රධාන බ්‍රව්සර් සඳහා මෙය දැනට සහය දක්වයි. වැඩිදුර සහාය සඳහා මට භාවිතා කළ හැකිද ... බලන්න .

බහු තීරු සමඟ මෙය භාවිතා කරන්නේ කෙසේද?

අතෙහි ඇති ප්‍රශ්නය සම්බන්ධයෙන්, වම් සහ දකුණු බෙදීම් ඇතුළත්, JSFiddle උදාහරණයක් මෙහි තීරු දෙකක පිරිසැලසුමක් vhසහ දෙකම සම්බන්ධ vwවේ.

කොහොමද `100vh`විවිධ `100%`?

උදාහරණයක් ලෙස මෙම පිරිසැලසුම ගන්න:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

මෙහි ඇති pටැගය 100% ක උසකට සකසා ඇත, නමුත් එහි අඩංගු divපික්සල් 200 ක උස නිසා, පික්සල් 200 න් 100% පික්සල් 200 බවට පත්වේ, උසින් 100% නොවේbody . 100vhඒ වෙනුවට භාවිතා කිරීම යනු pඋස bodyනොතකා ටැගය 100% ක උසකින් divයුක්ත වේ. වෙනස පහසුවෙන් දැක ගැනීමට මේ සමඟ ඇති JSFiddle දෙස බලන්න!

— ජේම්ස් ඩොනලි
source

35

මූලද්‍රව්‍යය ඇත්ත වශයෙන්ම දර්ශනපත්‍රයට වඩා උස වන විට අනුචලනය සමඟ අමුතු හැසිරීම. කන්ටේනරය දර්ශනපථයේ උස පවත්වා ගෙන යන අතර අන්තර්ගතය කන්ටේනරයෙන් පිටතට ගලා යයි. min-height:100vhමේ වටා වැඩ කරන බවක් පෙනේ.

— wdm

8

@DGDD මෙය iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 සහ IEMobile 10.0 මත ක්‍රියා කරයි. ඔබ යොමු කරන්නේ කුමන ජංගම බ්‍රව්සරයටදැයි මම නොදනිමි, නමුත් එම 4 භාවිතා කරන්නේ ජංගම බ්‍රව්සර් වලින් 90% කට වඩා වැඩි ප්‍රමාණයකි. මෙම ප්‍රශ්නය ජංගම බ්‍රව්සර් මත වැඩ කිරීමේ අවශ්‍යතාවයක් සඳහන් නොකරයි.

— ජේම්ස් ඩොනලි

1

@ robross0606 නැවතත් එය මා මෙහි පිළිතුරු දුන් ප්‍රශ්නය නොවේ. එය මුලුමනින්ම වෙනස් ප්‍රශ්නයකි, කාගේ පිළිතුර ඇත්ත වශයෙන්ම නම්‍ය පෙට්ටිය භාවිතා කරයි: stackoverflow.com/questions/90178/…

— ජේම්ස් ඩොනලි

1

@ ජේම්ස් ඩොනලි ඔව්, මම දන්නවා. නමුත් මෙම ප්‍රශ්නයට පිළිතුර එය නොවේ. බ්‍රව්සර් කවුළු උස සඳහා navbar උස ඇතුළත් වේ. මෙය වඩා හොඳ වනු ඇත, මන්ද ජංගම බ්‍රව්සර් වල, නැව්බාර් පෙන්වන / සැඟවී සිටින සෑම අවස්ථාවකම දර්ශනපථයේ උස වෙනස් වේ.

— රෙඩ්ක්ලෝවර්

3

ජංගම ඇඟවීම්: ක්‍රෝම් මොබයිල් සමඟ vh අවුල් භාවිතා කරමින් එහි navbar සැලකිල්ලට නොගනී. ඉන්පසු එය ඔබගේ පිටුවේ ඉහළ කොටස ආවරණය කරයි. ඔබට එහි මෙනුවක් තිබේ නම් බරපතල ගැටළුවක් ...

— Offirmo

570

ඔබට <div>කිසියම් හෝ මූලද්‍රව්‍යයක උස සැකසීමට අවශ්‍ය නම් , ඔබ උස <body>සහ <html>100% දක්වාද සැකසිය යුතුය . එවිට ඔබට මූලද්‍රව්‍යයේ උස 100% සමඟ සැකසිය හැකිය :)

මෙන්න උදාහරණයක්:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— අරියෝනා රයන්
source

110

මම වැරදියි නම් මාව නිවැරදි කරන්න, නමුත් මම හිතන්නේ ඔබත් වැඩ කිරීමට දෙමව්පියන්ගේ උස සකසා ගත යුතුයි

— ඩැනී වයි

මම අඛණ්ඩ මෝස්තරයක් භාවිතා කරන්නේ නම් මෙය ක්‍රියා නොකරනු ඇත: පිටු 6000px උස, පිටු නියෝජනය කරන කුට්ටි. මට අවශ්‍ය වන්නේ එක් බ්ලොක් එකක් හරියටම දර්ශනපථයේ උස වීමයි.

— Qwerty

Any ඩැනී, ඔබ හරි. තිරයේ උස ඇති සෑම දෙයකම ඇඟවුම් සහිතව, ඔබ සියලු දෙමව්පියන්ට උස සකස් කළ යුතුය. මෙන්න උදාහරණයක් .

— toto_tico

මෙම උපක්‍රමය සමහර අවස්ථාවන් සඳහා ක්‍රියා කරන නමුත් සමහර අවස්ථාවලදීද එය එසේ නොවේ, ඔබ ගැළපුම හෝ වඩාත් නිර්දේශිත ක්‍රමයක් සොයන්නේ නම්, ඔබට ඉහත ජේම්ස්ගේ පිළිතුර නැරඹිය හැකිය :) Viewport ප්‍රතිශත ක්‍රමය භාවිතා කිරීම :), එයද ක්‍රියාත්මක විය යුතුය. ප්රීති ඝෝෂාවට

— Ariona මේ අනුව මහාචාර්ය ධර්මදාසයන්

8

@Qwerty, මෙන්න විසඳුම. එසේ Set CSS: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. එබැවින් ඔබට කොටස් 3 ක් තිබේ නම්, එය එසේ වනු ඇතhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— කැමරොන්ජොන්ස්වෙබ්

283

ඔබේ අංග නියත වශයෙන්ම ස්ථානගත කිරීමට ඔබට හැකි නම්,

position: absolute;
top: 0;
bottom: 0;

ඒක කරයි.

— ටිනිස්ටර්
source

16

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

— රිකී බෝයිස්

1

එය ක්‍රියා නොකරයි, එහි දෙමව්පියන්ගෙන් එක් අයෙකු සකසා ඇති විට position:relativeසහ එහි උස 100% දර්ශනපත්‍රයේ නොමැති විට. එය ඊළඟ relative ාතියාට හෝ නිරපේක්ෂ මුතුන් මිත්තන්ට ඉහළ සහ පහළ සකස් කරයි.

— සීකා 85

141

ඔබට CSS හි දර්ශන-වරාය ඒකකය භාවිතා කළ හැකිය:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

— ගීක් මහතා
source

1

Ama ලමාර් * { box-sizing: border-box; }එය සිදුවීම වැළැක්වීමට ඔබ භාවිතා කළ යුතුය .

— ලූකා ස්ටීබ්

2

Viewport ඒකකවල බ්‍රව්සර් සහාය සඳහා කැනියස් පරික්ෂා කිරීම වටී: caniuse.com/#feat=viewport-units

— ඩේව් එවරිට්

134

දර්ශනපථයේ උසින් 1% ටvh සාපේක්ෂව ඔබට මෙම නඩුවේ භාවිතා කළ හැකිය ...

ඒ කියන්නේ ඔබට උස වසා ගැනීමට අවශ්‍ය නම් සරලව භාවිතා කරන්න 100vh.

පහත රූපය දෙස බලන්න මම ඔබ වෙනුවෙන් මෙහි අදින්නෙමි:

පහත පරිදි මම ඔබ වෙනුවෙන් නිර්මාණය කළ ස්නිපටය උත්සාහ කරන්න:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}

<div class="left"></div>
<div class="right"></div>

ස්නිපටය පුළුල් කරන්න

— අලිරේසා
source

100vh ලබා දීමෙන් පිටුව සඳහා සිරස් අනුචලන එකතු කරන ලදි, එබැවින් මෙය අනුගමනය කළ නමුත් එය ක්‍රියාත්මක නොවීය. stackoverflow.com/questions/44645465/… . සිරස් අනුචලනය වළක්වා ගැනීමටත්, කිසිදු අන්තර්ගතයක් නොමැතිව ඩිවෝ පතුලේ ස්පර්ශ කිරීමටත් ක්‍රමයක් තිබේද?

— ඩිලීප් තෝමස්

ILDILEEPTHOMAS පවතින දේ සොයා බලන්නpaddings/margins

— ජනප්‍රවාද

File මූල ගොනුවේ පුරාවෘත්තයන් මම * {ආන්තිකය: 0, පෑඩින්: 0 as ලෙස දීමට උත්සාහ කළ නමුත් එය ක්‍රියාත්මක වූයේ නැත

— ඩිලීප් තෝමස්

1

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

— ජනප්‍රවාද

102

නම්‍යශීලී ආකෘතියvh හා සසඳන විට ඉහළින්ම ඡන්දය දුන් අනෙක් සියලුම විසඳුම් උප ප්‍රශස්ත වේ විසඳුම වේ.

CSS නම්යශීලී මාදිලියේ පැමිණීමත් සමඟ , 100% උස ගැටළුව විසඳීම ඉතා පහසු වේ: height: 100%; display: flexදෙමව්පියන් මත භාවිතා කරන්න, සහflex: 1 ළමා අංග මත . ඔවුන් තම බහාලුම්වල ඇති සියලුම ඉඩ ස්වයංක්‍රීයව ලබා ගනී.

සලකුණු කිරීම සහ CSS කොතරම් සරලද යන්න සැලකිල්ලට ගන්න. මේස හැක්ස් හෝ කිසිවක් නැත.

නම්‍යතා ආකෘතියට සියලුම ප්‍රධාන බ්‍රව්සර් මෙන්ම IE11 + ද සහාය දක්වයි .

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

ස්නිපටය පුළුල් කරන්න

නම්‍ය ආකෘතිය ගැන වැඩි විස්තර මෙතැනින් ඉගෙන ගන්න .

— අයිරන්
source

3

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

— schellmax

1

ගැටලුවේ උදාහරණය ෂෙල්මැක්ස්

— Arete

සැලසුම මත පදනම්ව, overflow-y: auto;"බහාලුම් මුල් ශරීර උස ඉක්මවා යයි" වළක්වා ගත හැකිය.

— ඊවි ගීතය

54

වැනි වැදගත් තොරතුරු කිහිපයක් ඔබ සඳහන් නොකරයි:

පිරිසැලසුම ස්ථාවර පළලද?
තීරු දෙකම පළල ස්ථාවර කර තිබේද?

මෙන්න එක් හැකියාවක්:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

ස්නිපටය පුළුල් කරන්න

කුමන තීරු සවි කළ යුතුද සහ දියරද යන්න මත පදනම්ව මේ පිළිබඳ බොහෝ වෙනස්කම් තිබේ. ඔබට මෙය නිරපේක්ෂ ස්ථානගත කිරීමකින් ද කළ හැකි නමුත් මම සාමාන්‍යයෙන් වඩා හොඳ ප්‍රති results ල සොයාගෙන ඇත (විශේෂයෙන් හරස් බ්‍රව්සරය අනුව) ඒ වෙනුවට පාවෙන භාවිතා කරමින්.

— cletus
source

33

මෙය මට වැඩ කළේ:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

ස්නිපටය පුළුල් කරන්න

position:fixedඒ වෙනුවට භාවිතා කරන්න position:absolute, ඔබ පහළට අනුචලනය කළත් තිරය අවසානය දක්වා විහිදේ.

— මජ්ඩා
source

"පිහිටීම: [ස්ථාවර | නිරපේක්ෂ]" සහිත මෙම කේතය උත්පතන වල පසුබිම් සඳහා විශිෂ්ටයි (ඔබ පින්තූරයක් විශාලනය කිරීමට ක්ලික් කළ විට වැනි) නමුත් ඔබට සැබවින්ම පහළට අනුචලනය කිරීමට අවශ්‍ය අවස්ථාවන්හිදී එතරම් විශ්වාස නැත. තවමත් ප්රයෝජනවත් පිටි ගුලිය!

— මෑනිෆැට්බෝයි

29

මෙන්න උස සඳහා විසඳුමක්.

ඔබේ CSS භාවිතයේදී:

#your-object: height: 100vh;

සහාය නොදක්වන බ්‍රව්සරය සඳහා vh-units, modernizr භාවිතා කරන්න.

මෙම ස්ක්‍රිප්ට් එක එක් කරන්න (හඳුනාගැනීම එකතු කිරීමට vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

අවසාන වශයෙන් මෙම ශ්‍රිතය භාවිතා #your-objectකර බ්‍රව්සරය සහය නොදක්වන්නේ නම් දර්ශනපත්‍රයේ උස එක් කිරීමට vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

— ජොනස් සැන්ඩ්ස්ටෙඩ්
source

24

100% පළල සහ උස සඳහා වෙනස් ලෙස ක්‍රියා කරයි.

ඔබ සඳහන් කළ විට width: 100%, එයින් අදහස් වන්නේ "ලබා ගත හැකි පළලින් 100% මව් මූලද්‍රව්‍යයෙන් හෝ කවුළුවේ පළලින් ගන්න" යන්නයි.

ඔබ සඳහන් කළ විට height: 100%, එයින් අදහස් වන්නේ "මව් මූලද්‍රව්‍යයෙන් ලබා ගත හැකි උසින් 100% ක් ගන්න" යන්නයි. මෙයින් අදහස් කරන්නේ ඔබ ඉහළ මට්ටමේ මූලද්‍රව්‍යයක උස නියම නොකළහොත්, සියලු දරුවන්ගේ 0උස දෙමව්පියන්ගේ හෝ උසින් යුක්ත වන අතර min-heightකවුළු උසකින් යුක්ත වීමට ඉහළම මූලද්‍රව්‍යය සැකසිය යුත්තේ එබැවිනි .

මම සෑම විටම ශරීරයේ අවම උස 100vh ලෙස සඳහන් කරන අතර එය ස්ථානගත කිරීම සහ ගණනය කිරීම පහසු කරයි,

body {
  min-height: 100vh;
}

— දිනේෂ් පාණ්ඩියන්
source

16

එකතු කරන්න min-height: 100%සහ උස නියම නොකරන්න (හෝ එය ස්වයංක්‍රීයව තබන්න). එය මුළුමනින්ම මට කළ කාර්යයයි:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

— රෙමස් සිමියොන්
source

16

100vw === දර්ශනපත්‍රයේ පළලින් 100%.

100vh === දර්ශනපත්‍රයේ උසින් 100%.

ඔබට divපළල හෝ උස සැකසීමට අවශ්‍ය නම් බ්‍රව්සර් කවුළු ප්‍රමාණයෙන් 100% ක් භාවිතා කළ යුතුය:

පළල සඳහා: 100vw

උස සඳහා: 100vh

නැතහොත් ඔබට එය කුඩා ප්‍රමාණයක් සැකසීමට අවශ්‍ය නම්, CSS calcශ්‍රිතය භාවිතා කරන්න . උදාහරණයක්:

#example {
    width: calc(100vw - 32px)
}

— Руслан
source

12

<div>100% සිට උස සැකසීම සඳහා ක්‍රම කිහිපයක් තිබේ .

ක්රමය (අ):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}

<div class="div-left"></div>
<div class="div-right"></div>

ස්නිපටය පුළුල් කරන්න

Vh භාවිතා කරන ක්‍රමය (B):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}

<div class="div-left"></div>
<div class="div-right"></div>

ස්නිපටය පුළුල් කරන්න

නම්‍ය කොටුව භාවිතා කරන ක්‍රමය (ඇ):

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}

<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

ස්නිපටය පුළුල් කරන්න

— සන්තෝෂ් ඛල්ස්
source

12

මෙය මට ප්‍රයෝජනවත් විය:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

සිට ගෙන මෙම පිටුව .

— පරීක්ෂා කිරීම
source

12

සරලම ක්‍රමය නම් මේ ආකාරයට එය කිරීමයි.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

ස්නිපටය පුළුල් කරන්න

— එමිලෝ
source

11

සකස් කිරීමට උත්සාහ height:100%දී htmlසහbody

html, 
body {
    height: 100%;
}

ඔබට 2 div උස එකම භාවිතය සඳහා අවශ්‍ය නම් හෝ මව් මූලද්‍රව්‍ය display:flexදේපල සකසන්න .

— මොහොමඩ් ජාවෙඩ්
source

9

මෙහි ඇති සියලුම පිළිතුරු තිබියදීත්, කිසිවෙකු ඇත්ත වශයෙන්ම ගැටලුව විසඳා නැති බව දැකීමෙන් මම පුදුමයට පත් වීමි. මම 100vh height/ භාවිතා min-heightකළේ නම්, අන්තර්ගතය පිටුවකට වඩා දිගු වූ විට පිරිසැලසුම කැඩී ගියේය. මම ඒ වෙනුවට භාවිතා නම් 100% height/ min-height, අන්තර්ගතය පිටුව උස ට වඩා අඩු වූ විට මෙම සැකැස්ම බිඳ දැමී ය.

මෙම අවස්ථා දෙකම විසඳූ මා සොයාගත් විසඳුම වූයේ ඉහළම පිළිතුරු දෙක ඒකාබද්ධ කිරීමයි:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— machineghost
source

1

මා සතුව ස්ථාවර 90px උස navbar එකක් ඇත, එබැවින් මට ඔබගේ "100vh" "ගණනය (100vh - 90px)" ලෙස වෙනස් කිරීමට සිදුවිය

— මාර්ක් ජැක්සන්

8

"Px" වෙනුවට "vh" ඒකකය භාවිතා කරන්න, එයින් අදහස් වන්නේ දර්ශන වරායේ උසයි.

height: 100vh;

— කලීෆේ
source

7

අවහිර මූලද්රව්ය පෙරනිමියෙන් ඔවුන්ගේ දෙමව්පියන්ගේ සම්පූර්ණ පළල පරිභෝජනය කරයි.

සිරස් අතට සිරස්ව තැබීම යනු ඔවුන්ගේ සැලසුම් අවශ්‍යතාවය සපුරාලන ආකාරයයි.

9.4.1 අවහිර කිරීමේ ආකෘතිකරණ සන්දර්භය

බ්ලොක් හැඩතල ගැන්වීමේ සන්දර්භය තුළ, කොටු එකින් එක, සිරස් අතට, අඩංගු බ්ලොක් එකක ඉහළින් ආරම්භ වේ.

කෙසේ වෙතත්, මෙම හැසිරීම උස දක්වා විහිදෙන්නේ නැත.

පෙරනිමියෙන්, බොහෝ මූලද්‍රව්‍යයන් ඒවායේ අන්තර්ගතයේ උස වේ (height: auto ).

පළල මෙන් නොව, ඔබට අමතර ඉඩක් අවශ්‍ය නම් උස නියම කළ යුතුය.

එමනිසා, මෙම කරුණු දෙක මතකයේ තබා ගන්න:

ඔබට සම්පූර්ණ පළල අවශ්‍ය නොවන්නේ නම්, බ්ලොක් මූලද්‍රව්‍යයක පළල අර්ථ දැක්විය යුතුය
ඔබට අන්තර්ගත උස අවශ්‍ය නැතිනම්, මූලද්‍රව්‍යයක උස නිර්වචනය කළ යුතුය

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

ස්නිපටය පුළුල් කරන්න

— මයිකල් බෙන්ජමින්
source

7

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

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— නිව්ඩාර්ක්-එය
source

6

FlexBox CSS භාවිතා කරන්න

ෆ්ලෙක්ස්බොක්ස් යනු මෙම වර්ගයේ ගැටළු සඳහා පරිපූර්ණ සුදුසුකමකි. තිරස් දිශාවට අන්තර්ගතය තැබීම සඳහා බොහෝ දුරට ප්‍රසිද්ධ වුවත්, ෆ්ලෙක්ස්බොක්ස් ඇත්ත වශයෙන්ම සිරස් පිරිසැලසුම් ගැටළු සඳහාද ක්‍රියා කරයි. ඔබ කළ යුත්තේ සිරස් කොටස් නම්යශීලී භාජනයක ඔතා ඔබට පුළුල් කිරීමට අවශ්‍ය ඒවා තෝරා ගැනීම පමණි. ඔවුන් තම බහාලුම්වල ඇති සියලුම ඉඩ ස්වයංක්‍රීයව ලබා ගනී.

— robross0606
source

6

විකල්පයන්ගෙන් එකක් වන්නේ CSS වගුව භාවිතා කිරීමයි. එයට විශිෂ්ට බ්‍රව්සර් සහය ඇති අතර ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 හි පවා ක්‍රියා කරයි.

JSFiddle උදාහරණය

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

ස්නිපටය පුළුල් කරන්න

— ස්ටිකර්
source

6

මෙය උත්සාහ කරන්න - පරීක්ෂා කර ඇත:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

සංස්කරණය කරන්න: 2020 යාවත්කාලීන කිරීම:

ඔබට vhදැන් භාවිතා කළ හැකිය :

#right, #left {
  height: 100vh
}

— lukaszkups
source

5

ඔබට භාවිතා කළ හැකි display: flexහාheight: 100vh

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

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}

<div class="left">left</div>
<div class="right">right</div>

ස්නිපටය පුළුල් කරන්න

— Thuc Nguyen
source

මේ වන විටත් නම්‍යශීලි විසඳුම් කිහිපයක් පළ කර ඇති අතර, මෙම පිළිතුර ක්‍රියාත්මක කිරීමට දින 26 කට පෙර පමණක් පළ කර ඇත.

— ටයිලර් එච්

5

ඔබ කාරණා දෙකක් කළ යුතුය, එකක් ඔබ දැනටමත් කර ඇති උස 100% දක්වා සකස් කිරීමයි. දෙවැන්න පිහිටීම නිරපේක්ෂ ලෙස සකසා ඇත. එය කළ යුත්තේ උපක්‍රමයයි.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

මූලාශ්රය

— ප්‍රභාකරන් උන්ඩූර්ති
source

3

යල් පැන ගිය විසඳුම. vhඒ වෙනුවට භාවිතා කරන්න .

— avalanche1

1

ඔබ vhජංගම උපාංගවල ප්‍රතිචාරාත්මක මෝස්තර භාවිතා කිරීමට අදහස් කරන්නේ නම් භාවිතා නොකරන්න .

— ඇලෙක්සැන්ඩර් කිම්

5

පහත දැක්වෙන CSS උත්සාහ කරන්න:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— ProblemChild
source

5

ඇත්තටම මට වැඩ කළ දේ හොඳම දේ vh දේපළ .

මගේ ප්‍රතික්‍රියා යෙදුමේ දී මට අවශ්‍ය වූයේ ඩී.වී. මම උත්සාහ කළා height: 100%;, overflow-y: auto;නමුත්, සැකසීම විට ඔවුන් කිසිවෙකුත් වැඩ height:(your percent)vh;අදහස් ලෙස වැඩ කළා.

සටහන: ඔබ පෑඩින්, රවුම් කොන ආදිය භාවිතා කරන්නේ නම්, එම අගයන් ඔබේ vhදේපල ප්‍රතිශතයෙන් අඩු කිරීමට වග බලා ගන්න හෝ එය අමතර උස එකතු කර අනුචලන තීරු දර්ශණය කරන්න. මෙන්න මගේ නියැදිය:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

— ජිමී ෆ්ලෑෂ්
source

මාර්ගය වන විට, ඔබේ මූලද්‍රව්‍යයේ උසට බලපාන 'වටකුරු කොන්' ගැන ඔබ සඳහන් කරයි, සැකසුම box-sizing: border-box;මෙය ජය ගනු ඇතැයි මම අපේක්ෂා කරමි , එයින් අදහස් කරන්නේ මූලද්‍රව්‍යයේ ප්‍රමාණය (පළල සහ උස) ගණනය කිරීමේදී මායිම් ප්‍රමාණය ද සැලකිල්ලට ගන්නා බවයි.

— නීක්

5

මෙය වරක් උත්සාහ කරන්න ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

ස්නිපටය පුළුල් කරන්න

— සුනිල් රාජ්පුත්
source

3

ඔබ භාවිතා කරන්නේ නම් position: absolute;සහ jQuery නම්, ඔබට භාවිතා කළ හැකිය

$("#mydiv").css("height", $(document).height() + "px");

— ජෝන් ස්මිත් විකල්ප
source

1

ජාවාස්ක්‍රිප්ට් අවශ්‍ය නොවේ. නවීන විසඳුම වන්නේ CSS නම්‍ය කොටු ආකෘතිය භාවිතා කිරීමයි .

— ඩෑන් ඩස්කල්ස්කු

ඔබ JS භාවිතා කරන්නේ නම්, මෙය බෙහෙවින් ප්‍රයෝජනවත් බව මට පෙනී ගියේය. සටහන: $ (කවුළුව) සමඟ මෙය භාවිතා කිරීම වඩාත් සුදුසුය .load (), ඔබට F5 හෝ CTRL + F5 භාවිතයෙන් විවිධ ප්‍රති results ල ලැබෙනු ඇත. වැඩි විස්තර සඳහා මෙම සබැඳිය පරීක්ෂා කරන්න. stackoverflow.com/questions/13314058/...

— එඩ්වඩ්

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— රාම්නිවාස් ෂර්මා
source

1

අක්ෂර වින්‍යාසය: widht(අවසානයට ආසන්නව)

— පීටර් මෝර්ටෙන්සන්

බ්‍රව්සර් කවුළුවේ 100% ක උසකින් යුත් කොට් make ාශයක් සාදා ගන්නේ කෙසේද

Viewport-Percentage (හෝ Viewport- සාපේක්ෂ) දිග

Viewport-ප්‍රතිශත දිග යනු කුමක්ද?

බෙදුම්කරුවෙකු බ්‍රව්සරයේ උස පිරවීම සඳහා මෙය භාවිතා කරන්නේ කෙසේද?

HTML

CSS

මෙම නව ඒකක සඳහා සහය දක්වන බ්‍රව්සර් මොනවාද?

බහු තීරු සමඟ මෙය භාවිතා කරන්නේ කෙසේද?

කොහොමද 100vhවිවිධ 100%?

HTML

CSS

කොහොමද `100vh`විවිධ `100%`?