css - weschool - كلمات html




جعل div ملء ارتفاع مساحة الشاشة المتبقية (20)

أعمل حاليًا على تطبيق ويب ، حيث أريد أن يملأ المحتوى ارتفاع الشاشة بأكملها.

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

لديّ عنوان div ومحتوى div . في هذه اللحظة ، أستخدم جدولًا للتنسيق مثل:

CSS و HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

يتم ملء ارتفاع الصفحة بالكامل ، وليس هناك حاجة إلى التمرير.

لأي شيء داخل div المحتوى ، قم بتعيين top: 0; سوف يضعها تحت العنوان. في بعض الأحيان ، يكون المحتوى عبارة عن جدول حقيقي ، مع ضبط الارتفاع على 100٪. لن يسمح وضع header داخل content بهذا.

هل هناك طريقة لتحقيق نفس التأثير دون استخدام table ؟

تحديث:

العناصر داخل div المحتوى سيكون لها ارتفاعات تعيين النسب المئوية أيضاً. شيء ما في 100 ٪ داخل div سوف تملأه إلى الأسفل. كما سيكون عنصرين بنسبة 50 ٪.

التحديث 2:

على سبيل المثال ، إذا #content الرأس 20٪ من ارتفاع الشاشة ، فإن الجدول المحدد بنسبة 50٪ داخل #content 40٪ من مساحة الشاشة. حتى الآن ، فإن التفاف الشيء بأكمله في الطاولة هو الشيء الوحيد الذي يعمل.


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

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

الحل أعلاه يستخدم وحدات viewport و http://caniuse.com/#feat=flexbox ، وبالتالي فهو IE10 + ، مما يوفر لك استخدام الصيغة القديمة لـ IE10.

Codepen للعب مع: وصلة إلى codepen

أو هذا ، لأولئك الذين يحتاجون إلى الحاوية الرئيسية لتكون قابلة للتمرير في حالة تفيض المحتوى: وصلة إلى codepen


CSS فقط المنهج (إذا كان الارتفاع معروفًا / ثابتًا)

عندما تريد أن يمتد العنصر الأوسط عبر الصفحة بأكملها رأسيًا ، يمكنك استخدام calc() الذي تم تقديمه في CSS3.

إذا افترضنا أن لدينا عناصر header footer ثابت للارتفاع ونريد أن تتخذ علامة section كامل الارتفاع الرأسي المتوفر ...

Demo

ترميز مفترض

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

لذلك يجب أن يكون CSS الخاص بك

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

لذلك ، ما أفعله هنا هو ، إضافة ارتفاع العناصر وخصمها من 100% باستخدام وظيفة calc() .

فقط تأكد من استخدامك height: 100%; للعناصر الأصلية.


أنا تصارعت مع هذا لفترة من الوقت وانتهى الأمر بما يلي:

ولأنه من السهل جعل المحتوى DIV نفس الارتفاع كالأصل ولكن يبدو أنه من الصعب جعله ارتفاع الأم ناقص ارتفاع الرأس فقد قررت أن تجعل محتوى div ارتفاعًا كاملاً ولكن ضعه تمامًا في الزاوية العلوية اليسرى ثم حدد الحشو للقمة التي لديها ارتفاع الرأس. بهذه الطريقة ، يتم عرض المحتوى بدقة تحت العنوان ويملأ المساحة المتبقية بالكامل:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

إذا تمكنت من التعامل مع عدم دعم المتصفحات القديمة (أي MSIE 9 أو الأقدم) ، فيمكنك القيام بذلك من خلال http://caniuse.com/#feat=flexbox وهي بالفعل W3C CR. تسمح هذه الوحدة بالحيل الرائعة الأخرى أيضًا ، مثل إعادة ترتيب المحتوى.

لسوء الحظ ، لا تدعم MSIE 9 أو أقل ذلك ويجب عليك استخدام بادئة البائع لخاصية CSS لكل متصفح بخلاف Firefox. نأمل أن يسقط بائعون آخرون البادئة قريبًا أيضًا.

هناك خيار آخر هو CSS Grid Layout ، لكن هذا الدعم أقل من الإصدارات الثابتة من المتصفحات. من الناحية العملية ، تدعم MSIE 10 ذلك فقط.


بالنسبة إلى تطبيق الجوّال ، لا أستخدم سوى VH و VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

عرض - https://jsfiddle.net/u763ck92/


بدلاً من استخدام الجداول في الترميز ، يمكنك استخدام جداول CSS.

وضع علامة على

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(ذات الصلة) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 و FIDDLE2

بعض مزايا هذه الطريقة هي:

1) علامة أقل

2) الترميز هو أكثر الدلالي من الجداول ، لأن هذه ليست جداول البيانات.

3) دعم المتصفح جيد جدا : IE8 + ، جميع المتصفحات الحديثة والأجهزة المحمولة ( caniuse )

فقط من أجل الاكتمال ، إليك عناصر Html المكافئة لخصائص css لنموذج جدول CSS

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

جرب هذا

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);


كيف تستخدم ببساطة vh التي تعني view height في CSS ...

انظر إلى مقتطف الشفرة الذي أنشأته لك أدناه وشغله:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

انظر أيضًا إلى الصورة أدناه التي قمت بإنشائها لك:


لقد كنت أبحث عن إجابة لهذا أيضا. إذا كنت محظوظًا بما يكفي لتكون قادرًا على استهداف IE8 أو أعلى ، فيمكنك استخدام display:table والقيم ذات الصلة للحصول على قواعد تقديم الجداول بعناصر مستوى الكتلة بما في ذلك div.

إذا كنت أكثر حظًا ، وكان مستخدموك يستخدمون متصفحات المستوى الأعلى (على سبيل المثال ، إذا كان هذا تطبيقًا على أجهزة الكمبيوتر تتحكم فيه ، مثل أحدث مشروع لي) ، فيمكنك استخدام Flexible Box Layout في CSS3!


لم تنشر أي من الحلول العمل عندما تحتاج إلى div السفلي للتمرير عندما يكون المحتوى طويلاً جدًا. وإليك الحل الذي يعمل في هذه الحالة:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

المصدر الأصلي: ملء الارتفاع المتبقي من حاوية أثناء معالجة تجاوز في CSS

JSFiddle المعاينة الحية


لماذا ليس فقط هكذا؟

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

مما يتيح لك أتش تي أم أل والجسم (بهذا الترتيب) ارتفاع ثم تعطي فقط عناصرك ارتفاع؟

تناسبني


ما يعمل بالنسبة لي (مع div داخل div آخر وأفترض في كافة الظروف الأخرى) هو تعيين الحشو السفلي إلى 100٪. أي ، أضف هذا إلى css / الأنماط:

padding-bottom: 100%;

هناك الكثير من الأجوبة الآن ، لكنني وجدت استخدام الطول: 100vh ؛ للعمل على عنصر div الذي يحتاج لملء المساحة العمودية الكاملة المتاحة.

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

div {
    height: 100vh;
}

يدعم IE9 وما فوق: انقر لرؤية الرابط


يمكن أن يتم ذلك بواسطة CSS باستخدام vh :

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

و HTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

لقد تحققت من ذلك ، وهو يعمل في جميع المتصفحات الرئيسية: Chrome و IE و FireFox


يمكنك في الواقع استخدام display: table لتقسيم المنطقة إلى عنصرين (header و content) ، حيث يمكن أن يختلف الرأس في الارتفاع ويملأ المحتوى المساحة المتبقية. يعمل هذا مع الصفحة بأكملها ، وكذلك عندما تكون المنطقة ببساطة عبارة عن محتوى عنصر آخر يتم وضعه مع position إلى relative أو absolute أو fixed . ستعمل طالما أن العنصر الأصل يحتوي على ارتفاع غير صفري.

انظر هذا الكمان وأيضا الرمز أدناه:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

CSS3 طريقة بسيطة

height: calc(100% - 10px); // 10px is height of your first div...

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



it never worked for me in other way then with use of the JavaScript as NICCAI suggested in the very first answer. I am using that approach to rescale the <div> with the Google Maps.

إليك المثال الكامل لكيفية القيام بذلك (يعمل في Safari / FireFox / IE / iPhone / Andorid (يعمل بالتناوب)):

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

 style="height:100vh"

حل المشكلة بالنسبة لي. في حالتي قمت بتطبيق ذلك على div المطلوب





html-table