html - شرح - خصائص الوسم div




كيفية جعل ارتفاع div بنسبة 100٪ من نافذة المتصفح؟ (18)

100vw === 100٪ من عرض إطار العرض.

100vh === 100٪ من ارتفاع إطار العرض.

إذا كنت ترغب في ضبط عرض div أو ارتفاعه بنسبة 100٪ من حجم نافذة المتصفح ، يجب عليك استخدامه

للعرض: 100vw

للارتفاع: 100vh

أو إذا كنت ترغب في تعيين حجم أصغر استخدام calc function css. مثال:

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

لدي تخطيط مع عمودين - div الأيسر و div الصحيح.

يحتوي div الصحيح على لون background-color رمادية ، وأحتاجه للتوسع رأسيًا اعتمادًا على ارتفاع نافذة متصفح المستخدم. الآن ينتهي background-color في آخر جزء من المحتوى في ذلك div .

لقد حاولت height:100% ، الحد min-height:100%; إلخ


أحد الخيارات هو استخدام جدول CSS. لديه دعم متصفح كبير ، حتى يعمل في IE8.

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>


أضف min-height: 100% ولا تحدد ارتفاعًا (أو ضعها على السيارات). فعلت تماما لي وظيفة:

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

إذا كنت ترغب في ضبط ارتفاع <div> أو أي عنصر ، فيجب تعيين ارتفاع <body> و <html> على 100٪ أيضًا. ثم يمكنك ضبط ارتفاع العنصر مع 100 ٪ :)

هنا مثال:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

إذا كنت قادرًا على وضع عناصرك بشكل مطلق ،

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

أن تفعل ذلك.


افعل هذا:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.left, .right {
  width: 50%;
}

.left {
  background: #f0f0f0;
}

.right {
   background: #cccccc;
   color: #2e2e2e;
   position: fixed;
   right: 0;
   top: 0;
   bottom: 0;
}
<div class="left">

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>
</div>

<div class="right">
 THIS IS RIGHT
</div>

لقد حافظت على الموقف ثابتًا لأنه في وضعية المطلق ، عندما يتم تمرير الجسم ، فإنه يكشف عن أنه لا يغطي الارتفاع الكامل للنافذة.

إذا كنت لا تزال ترغب في القيام بذلك باستخدام الوضع المطلق ، فقد تضطر إلى استخدام القليل من jQuery لحساب ارتفاع المستند ، ثم ضبط هذا الارتفاع إلى div الصحيح ، كما يلي:

var getheight = $(document).height();
$(document).ready(function(){
 $(".right").css("height", getheight+"px");
});
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.left, .right {
  width: 50%;
}

.left {
  background: #f0f0f0;
}

.right {
   background: #cccccc;
   color: #2e2e2e;
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
    est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
    lorem, sed auctor tellus efficitur id.
  </p>

  <p>
    Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
    non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
    nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
  </p>

  <p>
    Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
    in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
    libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
  </p>

  <p>
    Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
    sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
    sem, vestibulum at felis et, finibus egestas sem.
  </p>

  <p>
    Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
    Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
    ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
  </p>
</div>

<div class="right">
 THIS IS RIGHT
</div>


تستهلك عناصر الحظر العرض الكامل للوالدين ، بشكل افتراضي.

هذه هي الطريقة التي تلبي متطلبات التصميم الخاصة بها ، وهي تكديس رأسياً.

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>


جرب css التالية:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

جميع الحلول الأخرى ، بما في ذلك المصوت الأعلى مع vh هي دون المستوى الأمثل عند مقارنتها مع الحل المرن .

مع ظهور نموذج Flex flex ، يصبح حل مشكلة ارتفاع 100٪ أمرًا غاية في السهولة: height: 100%; display: flex الاستخدام height: 100%; display: flex 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>

تعرف على المزيد حول النموذج المرن هنا.


حاول تعيين height:100% في html body

html, 
body {
    height: 100%;
}

وإذا كنت ترغب في استخدام نفس الارتفاع 2 div أو قم بتعيين display:flex العنصر الرئيسي display:flex property display:flex .


فقط استخدم وحدة "vh" بدلاً من "px" ، وهذا يعني ارتفاع منفذ العرض.

height:100vh;

لا تذكر بعض التفاصيل المهمة مثل:

  • هل التصميم ثابت العرض؟
  • هل أي من الأعمدة أو كلاهما ثابت العرض؟

فيما يلي أحد الاحتمالات:

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>

هناك العديد من الاختلافات في هذا يعتمد على الأعمدة التي يجب أن تكون ثابتة والتي هي سائلة. يمكنك القيام بذلك من خلال تحديد الموقع المطلق أيضًا ، لكنني وجدت عمومًا نتائج أفضل (خاصةً من حيث المتصفح المتقاطع) باستخدام عوامات بدلاً من ذلك.


هذا ما نجحني:

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

position:fixed الاستخدام position:fixed بدلاً من position:absolute ، وبهذه الطريقة حتى إذا قمت بالتمرير لأسفل سيتم توسيع القسم إلى نهاية الشاشة.


هنا شيء ليس بالضبط مثل ما لديك أعلاه ولكن يمكن أن يكون مفيدا للبعض.

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/


هناك نوعان من وحدات القياس CSS3 تسمى:

مرات المشاهدة - النسبة المئوية (أو فترات العرض - النسبي)

ما هي أطوال مدى العرض - النسبة المئوية؟

من توصية المرشح W3 المرتبطة أعلاه:

تكون أطوال نسبة إطار العرض بالنسبة إلى حجم الكتلة التي تحتوي عليها أولية. عندما يتم تغيير ارتفاع أو عرض الكتلة الأولية المحتوية ، يتم تحجيمها وفقًا لذلك.

هذه الوحدات هي vh (ارتفاع إطار العرض) ، vw (عرض إطار العرض) ، vmin (الحد الأدنى لطول العرض) و vmax (الطول الأقصى لطول العرض).

كيف يمكن استخدام هذا لجعل الحاجز يملأ ارتفاع المتصفح؟

بالنسبة إلى هذا السؤال ، يمكننا الاستفادة من vh : 1vh يساوي 1٪ من ارتفاع إطار العرض. بمعنى ، يساوي 100vh ارتفاع نافذة المتصفح ، بغض النظر عن موقع العنصر في شجرة DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

هذا هو حرفيا كل ما هو مطلوب. هنا مثال JSFiddle لهذا قيد الاستخدام.

ما المتصفحات التي تدعم هذه الوحدات الجديدة؟

هذا معتمد حاليًا على جميع المتصفحات الرئيسية الحديثة باستثناء Opera Mini. تحقق من هل يمكنني استخدام ... لمزيد من الدعم.

كيف يمكن استخدام هذا مع عدة أعمدة؟

في حالة وجود سؤال في متناول اليد ، مع عرض أحد الفواصل اليسرى واليمنى ، في ما يلي مثال 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 بكسل ، يصبح 100٪ من 200 بكسل × 200 بكسل ، وليس 100٪ من ارتفاع body . يعني استخدام 100vh بدلاً من ذلك أن علامة p ستكون أعلى بنسبة 100٪ من body بغض النظر عن ارتفاع div . إلقاء نظرة على هذا JSFiddle يرافق لرؤية الفرق بسهولة!


وإليك إصلاحًا لهذا الارتفاع.

في استخدام 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'});
    }
});

يمكنك استخدام vh في هذه الحالة وهو نسبة إلى 1٪ من ارتفاع منفذ العرض.

وهذا يعني إذا كنت تريد تغطية الارتفاع ، استخدم فقط 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>


يمكنك استخدام وحدة view-port في 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*/
}




height