جعل div ملء ارتفاع المتبقية من مساحة الشاشة
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أعمل على تطبيق ويب حيث أريد المحتوى لملء ارتفاع الشاشة بأكملها.
الصفحة الرأس الذي يحتوي على شعار و معلومات الحساب.هذا يمكن أن يكون تعسفيا الارتفاع.أريد المحتوى div لملء بقية الصفحة إلى أسفل.
لدي رأس 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:
على سبيل المثال إذا كان رأس يستغرق 20% من الشاشة الطول الجدول المحدد في 50% داخل #content سوف يستغرق 40% من مساحة الشاشة.حتى الآن التفاف شيء كامل في الجدول هو الشيء الوحيد الذي يعمل.
المحلول
2015 التحديث:على نهج flexbox
هناك نوعان من إجابات أخرى لفترة وجيزة بالذكر flexbox;ومع ذلك ، كان هذا قبل أكثر من سنتين, و أنها لا توفر أية أمثلة.المواصفات flexbox استقر بالتأكيد الآن.
ملاحظة:على الرغم من CSS مرنة صناديق تخطيط المواصفات في المرشح التوصية المرحلة ، ليس كل المتصفحات نفذت ذلك.بكت التنفيذ يجب أن تكون مسبوقة بـ -webkit-;Internet Explorer تنفذ نسخة قديمة من المواصفات ، مسبوقة مع -ms-;Opera 12.10 تطبق أحدث نسخة من المواصفات ، unprefixed.انظر جدول التوافق على كل الممتلكات على ما يصل إلى موعد حالة التوافق.
(مأخوذة من https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
جميع المتصفحات الرئيسية و IE11+ دعم Flexbox.IE 10 أو أكثر ، يمكنك استخدام FlexieJS شيم.
للتحقق من الدعم الحالي يمكنك أن ترى أيضا هنا:http://caniuse.com/#feat=flexbox
على سبيل المثال العمل
مع flexbox يمكنك التبديل بسهولة بين أي من الصفوف أو الأعمدة إما وجود ثابتة الأبعاد المحتوى الحجم الأبعاد أو المتبقية-أبعاد الفضاء.في بلدي على سبيل المثال أنا وضعت رأس المفاجئة إلى المحتوى (كما في العمليات السؤال) ، لقد تم إضافة تذييل إلى إظهار كيفية إضافة ارتفاع ثابت المنطقة ثم حدد منطقة المحتوى لملء المساحة المتبقية.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>في CSS أعلاه ، فليكس الملكية shorthands على فليكس-تنمو, فليكس-تقليص, ، فليكس-أساس خصائص لتحديد مرونة فليكس البنود.موزيلا لديها مقدمة جيدة مرنة مربعات نموذج.
نصائح أخرى
هناك في الحقيقة ليست سليمة ، عبر متصفح طريقة للقيام بذلك في CSS.على افتراض التصميم الخاص بك لديه تعقيدات تحتاج إلى استخدام جافا سكريبت لوضع عنصر الطول.جوهر ما تحتاج إلى القيام به هو:
Element Height = Viewport height - element.offset.top - desired bottom margin
مرة واحدة يمكنك الحصول على هذه القيمة و تعيين عنصر الطول تحتاج إلى إرفاق معالجات الأحداث إلى نافذة onload و onresize بحيث يمكنك اطلاق النار الخاص بك وظيفة تغيير الحجم.
أيضا ، على افتراض المحتوى الخاص بك يمكن أن يكون أكبر من العرض, سوف تحتاج إلى تعيين overflow-y إلى انتقل.
المشاركة الأصلية أكثر من 3 سنوات.أعتقد أن العديد من الناس الذين يأتون إلى هذا المنصب مثلي تبحث عن التطبيق مثل تخطيط الحل يقول بطريقة أو بأخرى ثابتة رأس وتذييل و ارتفاع كامل المحتوى تناول بقية الشاشة.إذا هذا المنصب قد تساعد ، فإنه يعمل على IE7+ ، إلخ.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
وهنا بعض مقتطفات من هذا المنصب:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>بدلا من استخدام الجداول في العلامات ، يمكن استخدام CSS الجداول.
العلامات
<body>
<div>hello </div>
<div>there</div>
</body>
(ذات الصلة) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
بعض مزايا هذه الطريقة هي:
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 }
CSS فقط النهج (إذا كان ارتفاع المعروف/ثابت)
عندما تريد منتصف عنصر تمتد عبر كامل الصفحة عموديا ، يمكنك استخدام calc() والتي يتم تقديمها في CSS3.
على افتراض لدينا ارتفاع ثابت header و footer عناصر نريد section الوسم أن تأخذ كامل المتاحة الارتفاع العمودي...
يفترض العلامات
<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%; على الأم العناصر.
المستخدمة:height: calc(100vh - 110px);
كود:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>كيف يمكنك ببساطة استخدام vh والتي تقف على view height في CSS...
نظرة على التعليمات البرمجية المتكررة أنا خلقت لك أدناه وتشغيله:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>كما تبدو في الصورة أدناه الذي خلقته لك:
CSS3 طريقة بسيطة
height: calc(100% - 10px); // 10px is height of your first div...
جميع المتصفحات الرئيسية هذه الأيام الدعم لها ، لذلك يذهب إلى الأمام إذا لم يكن لديك شرط لدعم خمر المتصفحات.
يمكن أن يتم ذلك بحتة من قبل 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
الحل بسيط باستخدام flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>أي من الحلول نشر العمل عندما كنت في حاجة إلى أسفل 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
كنت أبحث عن إجابة لهذا أيضا.إذا كنت محظوظا بما فيه الكفاية لتكون قادرة على استهداف IE8 ، يمكنك استخدام display:table وما يتصل بها من قيم للحصول على التقديم قواعد الجداول مع كتلة على مستوى العناصر بما في ذلك شعبة.
إذا كنت حتى أكثر حظا و المستخدمين تستخدم من الدرجة الاولى المتصفحات (على سبيل المثال ، إذا كان هذا هو إنترانت التطبيق على أجهزة الكمبيوتر يمكنك التحكم مثل أحدث مشروع بلدي هو) ، يمكنك استخدام جديدة مرونة تخطيط مربع في CSS3!
ما عملت بالنسبة لي (مع شعبة في آخر div وأنا أفترض في كل ظروف أخرى) هو أسفل الحشو إلى 100%.هذا هو, هذا إضافة إلى الخاصة بك css / الأنماط:
padding-bottom: 100%;
تنويه:الجواب المقبول يعطي فكرة الحل, ولكن أنا وجدت أنه قليلا المتضخمة مع غير ضرورية المجمع و قواعد 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 */
}
الحل أعلاه يستخدم وحدات العرض و flexbox, ولذلك IE10+, يوفر لك استخدام بناء جملة القديم IE10.
Codepen للعب مع: رابط codepen
أو هذا واحد بالنسبة لمن يحتاج الرئيسية حاوية أن تكون قابلة للتمرير في حالة تفيض المحتوى: رابط codepen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
في كل عاقل المتصفحات, يمكنك وضع "رأس" div قبل المحتوى ، أخ ، و نفس CSS العمل.ومع ذلك ، IE7 - لا يفسر الارتفاع بشكل صحيح إذا كانت تطفو 100% في هذه الحالة حتى الرأس يجب أن يكون في المحتوى ، على النحو الوارد أعلاه.تجاوز:السيارات سوف يسبب ضعف أشرطة التمرير على أي (الذي دائما المعاينة التمرير مرئية ، ولكن تعطيل) ، ولكن دون ذلك ، فإن المحتوى كليب إذا كان يفيض.
هناك الكثير من الإجابات الآن لكن وجدت باستخدام height: 100vh; للعمل على عنصر div الذي يحتاج إلى ملء كامل المساحة العمودية المتاحة.
في هذه الطريقة لا تحتاج للعب مع حولها أو عرض أو المواقع.جاء في متناول اليدين عند استخدام التمهيد لجعل لوحة القيادة حيث كان الشريط الجانبي الرئيسي.أردت أن تمتد ملء كامل المساحة العمودية حتى أتمكن من تطبيق "لون الخلفية".
div {
height: 100vh;
}
يدعم IE9 يصل: انقر لرؤية الرابط
إذا كان يمكنك التعامل مع عدم دعم المتصفحات القديمة (وهذا هو ، MSIE 9 أو أكثر) ، يمكنك أن تفعل هذا مع مرونة تخطيط مربع وحدة والتي هي بالفعل W3C CR.هذه الوحدة تسمح لطيفة أخرى الحيل أيضا ، مثل إعادة ترتيب المحتوى.
للأسف MSIE 9 أو أقل لا تدعم هذا وكان لديك لاستخدام بائع البادئة عن خاصية CSS لكل متصفح آخر من فايرفوكس.نأمل أن الشركات الأخرى قطرة البادئة قريبا جدا.
وهو سيكون خيار آخر CSS تخطيط الشبكة ولكن هذا الدعم حتى أقل من مستقرة الإصدارات من المتصفحات.في الممارسة العملية, فقط MSIE 10 يدعم هذا.
أنا wresteled مع هذا لفترة من الوقت وانتهى التالية:
لأنه من السهل أن تجعل المحتوى 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%;
}
لماذا لا مجرد مثل هذا ؟
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
يعطيك html و الجسم (في) ارتفاع و من ثم إعطاء العناصر الارتفاع ؟
يعمل بالنسبة لي
style="height:100vh"
تحل مشكلة بالنسبة لي.في حالتي أنا طبقت هذا المطلوبة div
فقط تحديد body مع display:grid و grid-template-rows باستخدام auto و fr قيمة الممتلكات.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>يمكنك فعلا استخدام display: table إلى تقسيم المنطقة إلى عنصرين (رأس المحتوى), حيث رأس يمكن أن تختلف في الطول و المحتوى يملأ المساحة المتبقية.هذا يعمل مع صفحة كاملة ، وكذلك عند منطقة ببساطة محتوى عنصر آخر وضعه مع 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>
فنسنت سوف الإجابة مرة أخرى باستخدام المتطلبات الجديدة.منذ كنت لا تهتم حول المحتوى مخفي لو انها طويلة جدا, لا تحتاج إلى تعويم الرأس.فقط ضع تجاوز خفية على html و الجسم العلامات ، وتعيين #content الارتفاع إلى 100%.المحتوى سوف يكون دائما أطول من العرض قبل ارتفاع الرأس, ولكن سوف تكون مخفية و لن يسبب التمرير.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
جرب هذا
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
لقد وجدت الحل بسيط جدا, لأنه بالنسبة لي كان مجرد تصميم المسألة.أردت بقية الصفحة لا تكون بيضاء تحت الحمراء تذييل الصفحة.لذلك أنا وضعت صفحات لون الخلفية إلى اللون الأحمر.ومحتويات backgroundcolor إلى الأبيض.مع محتويات ارتفاع تعيين على سبيل المثال.20em أو 50% تقريبا صفحة فارغة لن تترك صفحة كاملة الأحمر.
لتطبيقات الجوال أنا فقط استخدام VH و فولكس فاجن
<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;
}
كان عندي نفس المشكلة ولكن أنا لا يمكن أن تجعل العمل الحل مع flexboxes أعلاه.لذلك أنا خلقت بلدي قالب, ويشمل ذلك:
- رأس مع حجم ثابت عنصر
- تذييل
- شريط جانبي مع شريط التمرير التي تحتل المتبقية ارتفاع
- المحتوى
اعتدت flexboxes ولكن في طريقة أكثر بساطة, فقط باستخدام خصائص عرض:فليكس و فليكس-الاتجاه:الصف|العمود:
أنا لا استخدم الزاوي أريد مكون أحجام إلى 100% من العنصر الأصلي.
والمفتاح هو لتحديد حجم (في النسب) لجميع الآباء والأمهات اتباعها للحد من حجمها.في المثال التالي اسم الارتفاع 100% من العرض.
المكون الرئيسي له 90% من العرض, لأن رأس وتذييل الصفحة 5%.
نشرت لي القالب هنا: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
تدور فكرة السيدالغريبة...
هذا يبدو نظافة الحل من شعبية فليكس مربع واحد CSS3 تمكين المتصفحات.
ببساطة استخدام مين الطول(بدلا من الارتفاع) مع احسب() إلى كتلة المحتوى.
واحسب() يبدأ مع 100% وينقص مرتفعات الرؤوس والتذييلات (تحتاج إلى تضمين الحشو القيم)
باستخدام "min-height:" بدلا من "الطول" هو مفيدة بشكل خاص حتى تتمكن من العمل مع جافا سكريبت المحتويات المقدمة و شبيبة أطر مثل Angular2.وإلا فإن الحساب لن تدفع تذييل الصفحة إلى أسفل الصفحة مرة واحدة جافا سكريبت المقدمة المحتوى مرئيا.
هنا مثال بسيط من رأس و تذييل الصفحة باستخدام 50px ارتفاع 20px الحشو على حد سواء.
Html:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
Css:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
بالطبع الرياضيات يمكن أن تكون مبسطة ولكن تحصل على هذه الفكرة...
انها ديناميكية احسب remining مساحة الشاشة ، أفضل باستخدام جافا سكريبت.
يمكنك استخدام CSS-في-شبيبة التكنولوجيا ، مثل أدناه lib:
ذلك لم يعمل بالنسبة لي في طريقة أخرى ثم مع استخدام جافا سكريبت كما NICCAI اقترح في أول الجواب.أنا باستخدام هذا النهج إلى إعادة مقياس <div> مع خرائط جوجل.
هنا هو مثال على كيفية القيام بذلك (يعمل في سفاري/فايرفوكس/IE/اي فون/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>
