نسبة ارتفاع HTML 5/CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

سؤال

أنا أحاول أن تعيين <div> إلى نسبة معينة ارتفاع في CSS لكن لا يزال نفس حجم المحتوى داخله.عندما إزالة HTML 5 <!DOCTYTPE html> ومع ذلك ، فإنه يعمل ، <div> أخذ كل صفحة كما تريد.أريد صفحة التحقق من صحة, ماذا يجب أن أفعل ؟

لدي هذا CSS على <div>, الذي له معرف page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
هل كانت مفيدة؟

المحلول

<اقتباس فقرة>   

واني اسعى الى وضع شعبة إلى ارتفاع نسبة معينة في CSS

والنسبة المئوية لماذا؟

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

وهكذا الأصل للشعبة يجب أن يكون خاصية height صريحة. في حين أن ارتفاع يمكن أيضا أن تكون النسبة المئوية إذا كنت تريد أن تتحرك مجرد مشكلة تصل إلى المستوى التالي.

إذا كنت تريد أن تجعل ذروة شعبة مئوية من ارتفاع العرض، كل الجد من شعبة، بما في ذلك <html> و<body>، يكون لديك height: 100%، حتى لا يكون هناك سلسلة من المرتفعات نسبة واضحة وصولا الى شعبة.

و(*: أو، إذا تم وضع شعبة، و"التي تحتوي على كتلة"، والتي هي أقرب إلى الجد وضعه أيضا)

وبدلا من ذلك، جميع المتصفحات الحديثة وIE الدعم> = 9 وحدات CSS جديدة بالنسبة إلى العرض الارتفاع (vh) وعرض العرض (vw): 

div {
    height:100vh; 
}

وانظر هنا ل مزيد من المعلومات .

نصائح أخرى

وتحتاج إلى تعيين ارتفاع على العناصر <html> و<body> كذلك؛ خلاف ذلك، وأنها ستكون فقط كبيرة بما يكفي لتناسب المحتوى. <وأ href = "http://software.hixie.ch/utilities/js/live-dom-viewer/؟٪3C!DOCTYPE٪20html٪3E٪0A٪3Ctitle٪3EExample٪20of٪20100٪25٪20width٪20and ٪ 20height٪ 3C٪ 2Ftitle٪ 3E٪ 0A٪ 3Cstyle٪ 3E٪ 0Ahtml٪ 2C٪ 20body٪ 20٪ 7B٪ 20height٪ 3A٪ 20100٪ 25٪ 3B٪ 20width٪ 3A٪ 20100٪ 25٪ 3B٪ 20margin٪ 3A٪ 200 ٪ 3B٪ 20٪ 7D٪ 0Adiv٪ 20٪ 7B٪ 20height٪ 3A٪ 20100٪ 25٪ 3B٪ 20width٪ 3A٪ 20100٪ 25٪ 3B٪ 20background٪ 3A٪ 20red٪ 3B٪ 20٪ 7D٪ 0A٪ 3C٪ 2Fstyle ٪ 3E٪ 0A٪ 3Cdiv٪ 3E٪ 3C٪ 2Fdiv٪ 3E "يختلط =" noreferrer "> على سبيل المثال : 

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

والجواب bobince سوف تتيح لك معرفة في هذه الحالات "ارتفاع: XX٪؛" وأو لن ينجح.

إذا كنت ترغب في إنشاء عنصر مع نسبة مجموعة (الطول:٪ منه في العرض الخاص)، فإن أفضل طريقة للقيام بذلك هي من خلال وضع بفعالية ارتفاع استخدام padding-bottom. مثال لمساحة: 

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

وسوف يكون مجرد جعل الحاوية مربع من الحشو، وسوف محتوى توسيع لملء الحاويات. مقال طويل من عام 2009 على هذا الموضوع: http://alistapart.com/article/creating-intrinsic-ratios- ل-فيديو

ويمكنك استخدام 100vw / 100vh. CSS3 يعطينا وحدات العرض نسبي. 100vw يعني 100٪ من عرض العرض. 100vh. 100٪ من الارتفاع. 

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

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

وهكذا، وطريقة للالتفاف على هذا هو تعيين دقيقة الارتفاع:

والاستمرار في السماح للعناصر الأم تلقائيا ضبط ارتفاعها ثم في شعبة الرئيسي الخاص بك، طرح أحجام بكسل من رأس وتذييل شعبة من 100vh (وحدات العرض). في المغلق، شيء من هذا القبيل:

ومين الارتفاع: أحسب (100vh - 246px)؛

و100vh غير كامل طول الشاشة، ناقص عناصر div المحيطة بها. عن طريق تحديد الحد الأدنى للطول وليس الارتفاع، المحتوى أطول من الشاشة سوف تستمر في التدفق، بدلا من الحصول على قطع.

مرحبا!من أجل استخدام النسبة المئوية (%) ، يجب أن تحدد % من هذا العنصر الأصل.إذا كنت تستخدم الجسم{height:100%} فهو لن يعمل لأنه الأصل لا نسبة في الارتفاع.في هذه الحالة من أجل العمل ارتفاع الجسم يجب إضافة هذا في html{height:100%}

في حالة أخرى للتخلص من تحديد الأصل نسبة يمكنك استخدام

الجسم{الارتفاع:100vh}

vh تقف على العرض الارتفاع

أعتقد أنه يساعد

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top