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

Question

أحاول إنشاء بعض فصول CSS قابلة للاستخدام لمزيد من الاتساق وأقل فوضى على موقعي، وأنا عالق في محاولة لتوحيد شيء واحد أستخدمه بشكل متكرر.

لدي حاوية <div> أنني لا أريد تعيين الارتفاع ل (لأنه سيختلف تبعا إلى أين هو على الموقع هو)، وداخله رأس <div>, ، ثم قائمة غير مرتبة من العناصر، كل ذلك مع تطبيق CSS لهم.

يبدو كثيرا مثل هذا:

انا اريد ال قائمة غير مرتبة لاتخاذ الغرفة المتبقية في الحاوية <div>, ، مع العلم أن الرأس <div> يكون 18px طويل. أنا فقط لا أعرف كيفية تحديد ارتفاع القائمة على أنه "نتيجة 100% ناقص 18px".

لقد رأيت هذا السؤال طرحه في سياقات أخرى على ذلك، لكنني اعتقدت أنه سيكون يستحق السؤال مرة أخرى على حالتي الخاصة. هل لدى أي شخص أي نصيحة في هذا الموقف؟

Answer 1

أدرك أن هذا منصب قديم، ولكن بالنظر إلى أنه لم يقترح أنه يجدر ذكر أنه إذا كنت تكتب للمتصفحات المتوافقة مع CSS3، فيمكنك استخدامها calc:

height: calc(100% - 18px);

الأمر يستحق كل هذا العناء أن لا تدعم جميع المتصفحات حاليا وظيفة CSS3 Calc () القياسية ()، لذا فإن تنفيذ إصدارات متصفح محددة من الوظيفة قد تكون مطلوبة مثل ما يلي:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Answer 2

لقليل من نهج مختلف، يمكنك استخدام شيء مثل هذا في القائمة:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

هذا يعمل طالما أن الحاوية الأصل لديها position: relative;

Answer 3

أنا استخدام jQuery لهذا

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

ثم ارتبط النافذة تغيير حجمها إلى Recalc، كلما تم تغيير حجم نافذة المتصفح (إذا تم تغيير حجم الحاوية مع تغيير حجم النافذة)

$(window).resize(function() { setSizes(); });

Answer 4

لا تحدد الارتفاع كنسبة مئوية، فقط ضبط top=0 و bottom=0, ، مثله:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Answer 5

افتراض ارتفاع رأس 17PX

قائمة CSS:

height: 100%;
padding-top: 17px;

رأس CSS:

height: 17px;
float: left;
width: 100%;

Answer 6

1. استخدم الهوامش السلبية على العنصر الذي ترغب في طرد البكسل. (العنصر المطلوب)
2. يجعلون overflow:hidden; على العنصر المحتوي
3. التبديل إلى overflow:auto; على العنصر المطلوب.

عملت معي!

Answer 7

حاول تحجيم مربع. للحصول على القائمة:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

للرأس:

position: absolute;
left: 0;
top: 0;
height: 10px;

بالطبع، يجب أن يكون للحاوية الأصل شيء مثل:

position: relative;

Answer 8

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

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

في عنصر النافذة لدينا أضفنا هامش 20px الذي يساهم في تحديد المواقع بالنسبة للعناصر الأخرى على الشاشة، ولكن لا يسهم في "حجم" النافذة ". ثم يتم وضع رأس النافذة (الذي يزيله من تدفق العناصر الأخرى، لذلك لن يؤدي ذلك إلى تحول عناصر أخرى مثل القائمة غير المدروسة) ويتم وضعها العلوي -20px الذي يضع الرأس داخل الهامش من خلال النافذة. أخيرا، تتم إضافة عنصر UL الخاص بنا إلى النافذة، ويمكن تعيين الارتفاع إلى 100٪ مما سيؤدي إلى ملء جسم النافذة (باستثناء الهامش).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Answer 9

طريقة أخرى لتحقيق نفس الهدف: صناديق المرن. وبعد اجعل الحاوية المربع المرن المرن، ثم لديك كل حرية السماح ببعض العناصر بالحجم الثابت (السلوك الافتراضي) أو ملء / يتقلص إلى مساحة الحاويات (مع Flex-Flow: 1 و Flex- يتقلص: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

يرى https://jsfiddle.net/2lmodwxk/(حاول تمديد أو تقليل النافذة لإشعار التأثير)

ملاحظة: قد تستخدم أيضا الخاصية الاختصار:

   flex:1 1 auto;

Answer 10

شكرا، لقد قمت بحل الألغام بمساعدتكم، والتبديل قليلا منذ أن اريد عرض DIV 100٪ 100٪ Heigth (أقل ارتفاعا لبار أسفل) ولا تمرير على الجسم (دون اختراق أشرطة التمرير).

ل CSS:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

ل HTML:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

التي فعلت الخدعة، أوه نعم، لقد وضعت قيمة قيم صغيرة على DIV.Adjusted لأسفل أكثر من ارتفاع الشريط السفلي، وإلا يظهر شريط التمرير العمودي، قمت بتعديل ليكون أقرب قيمة.

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

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

the Objetive: لديك فيديو يأخذ 100٪ من Brower (وتغيير حجمه بشكل حيوي عندما يتم تغيير حجم المتصفح، ولكن دون تغيير نسبة العرض إلى الارتفاع)، أقل مساحة قليلة أستخدمها للحصول على DIV مع بعض النصوص والأزرار وما إلى ذلك (والمصادف W3C & CSS بالطبع).

تحرير: لقد وجدت السبب، علامة الفيديو هي مثل النص، وليس عنصر كتلة، لذلك قمت بإصلاحه بهذا CSS:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

لاحظ ال display:block; في علامة الفيديو.

Answer 11

لست متأكدا مما إذا كان هذا العمل في وضعك الخاص، لكنني وجدت أن الحشو على الدف الداخلي سيدفع المحتوى من الداخل إلى داخل DIV إذا كان الحم يحتوي على حجم ثابت. يجب عليك إما تعويم أو وضع عنصر رأسك تماما، ولكن خلاف ذلك، لم أحاول ذلك من أجل Divs Size المتغير.