CSS:ارتفاع منطقة النص كنسبة مئوية من ارتفاع إطار العرض

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

  •  08-07-2019
  •  | 
  •  

سؤال

أود أن أقول إن ارتفاع منطقة النص يساوي، على سبيل المثال، 50% من ارتفاع إطار العرض.كيف أقوم بذلك؟بسيط height: 50% لا تفعل الخدعة.

هل كانت مفيدة؟

المحلول

ارتفاع بسيط:50% لا يفي بالغرض.

لا، لأن الأصل ليس له ارتفاع واضح.إذن 50% من ماذا؟يقول الوالد "تلقائي"، مما يعني أنه يعتمد على ارتفاع محتوى الطفل.والذي يعتمد على الارتفاع على الوالدين.ارغ!إلخ.

لذلك عليك أن تعطي والده نسبة مئوية من الارتفاع.ووالد الوالد، وصولاً إلى الجذر.مستند مثال:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

الاحتمال الآخر إذا كنت لا ترغب في ضبط الارتفاع على كل شيء هو استخدام الموضع المطلق.يؤدي هذا إلى تغيير العنصر الذي تعتمد عليه الأبعاد من الأصل المباشر إلى أقرب سلف باستخدام إعداد "الموضع" بخلاف "الثابت" الافتراضي.إذا لم تكن هناك عناصر سلف ذات موضع، فستعتمد الأبعاد على "الكتلة المحتوية الأولية"، والتي لها نفس حجم إطار العرض.

أخيرًا، هناك مشكلة تافهة وهي أن "100%" كبيرة جدًا بعض الشيء بسبب الحشو الإضافي والحدود المطبقة على مناطق النص.يمكنك حل هذه المشكلة عن طريق:

  • المساومة على شيء مثل 95٪، أو
  • ضبط المساحة المتروكة والحدود على 0/none في منطقة النص، أو
  • باستخدام "تحجيم الصندوق:صندوق الحدود ؛ " لتغيير ما يعنيه "الارتفاع".هذه إحدى ميزات CSS المستقبلية التي تتطلب العديد من التعديلات الإضافية الخاصة بالمتصفح (مثل "-moz-box-sizing").

نصائح أخرى

وهنا مثال القليل من textarea الذي يأخذ بالضبط 50٪ من ارتفاع العرض باستخدام vh CSS3 <لأ href = "http://dev.w3.org/csswg/css-values-3/#viewport- أطوال النسبية "يختلط =" noreferrer "> وحدة العرض وهو

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

ويساوي 1٪ من ارتفاع كتلة تحتوي الأولي.

وحتى إذا وضعناها في ذروة textarea إلى 50vh، وسوف تحصل على نصف ارتفاع body: 

html, body, textarea {
  box-sizing: border-box;
}

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

textarea {
  height: 50vh;
}
<textarea></textarea>

جيدة بدعم من قبل مختلف المتصفحات، باستثناء <م> أوبرا ميني والدعم الجزئي في IE .

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

ويمكنك أن تفعل ذلك إذا قمت بتعيين عرض: كتلة. ولكن في أتش تي أم أل 4.01 صارمة يجب عليك تعريف من الأعمدة والصفوف، ولكن اعتقد انه يمكن تجاوز لهم المغلق.

وHTML و CSS ليست جيدة جدا في القيام بهذا النوع من الشيء مع المرتفعات. أنها أكثر بالتأكيد عن التمرير عموديا من خلال صفحة والتدفق الحر. وأعتقد أن من المرجح أن يكون الحل الأكثر اكتمالا جافا سكريبت، كما يقول FryGuy.

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

وأنا جربت هذا في Internet Explorer 7، وفايرفوكس 3.0.

وببساطة استخدام التعليمات البرمجية التالية: 

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

ما المتصفح (ق) هل كنت تواجه مشاكل مع؟

وربما كان هذا لا حول عندما سئل هذا السؤال، ولكن القيم CSS وحدات وحدة المستوى 3 يتضمن <لأ href = "http://www.w3.org/TR/css3-values/#viewport-relative-lengths "يختلط =" نوفولو "> أطوال العرض مئوية . يبدو لا تكون معتمدة على متصفحات الجوال باستثناء دائرة الرقابة الداخلية ، و بالرغم من ذلك.

وحاول إزالة 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top