وضع div ارتفاع في HTML CSS

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

  •  08-06-2019
  •  | 
  •  

سؤال

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

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

تحرير:أوافق على أن هذا المثال هو شديد الجدول مثل الجدول الفعلي سيكون خيار جيد.ولكن "ريال مدريد" صفحة سوف يكون في نهاية المطاف أقل الجدول ، و أود فقط أن يتقن هذه المهمة!

أيضا, لسبب ما, عند إنشاء/تحرير مشاركاتي في IE7 ، رمز يظهر بشكل صحيح في المعاينة الرأي ، ولكن عندما كنت في الواقع نشر الرسالة تنسيق يحصل على إزالتها.تحرير منصبي في فايرفوكس 2 يبدو أنه قد نجح FWIW.

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

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

المحلول

مهم...

الإجابة على سؤالك هو أنه يجب تعيين ارتفاع من 100% إلى الجسم و html الوسم ، ثم تعيين الارتفاع إلى 100% على كل عنصر div كنت تريد أن تجعل 100% ارتفاع الصفحة.

في الواقع ، 100% ارتفاع لا تعمل في معظم حالات التصميم - قد تكون قصيرة ولكنها ليست إجابة جيدة.جوجل "أي عمود أطول" تخطيطات.أفضل طريقة هي وضع اليمين واليسار cols داخل المجمع div, وتطفو على اليسار واليمين cols ثم تطفو المجمع - وهذا يجعل تمتد إلى ارتفاع الداخلي حاويات - ثم تعيين صورة الخلفية على الغلاف الخارجي.ولكن احترس من أي الأفقي هوامش على تعويم العناصر في حال كنت تحصل على أي "ضعف هامش تطفو الشوائب".

نصائح أخرى

تعطي هذه المحاولة:

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}
<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

بعض المتصفحات تدعم CSS الجداول بحيث يمكنك إنشاء هذا النوع من التخطيط باستخدام CSS مختلفة display: table-* القيم.هناك مزيد من المعلومات حول CSS الجداول في هذه المقالة (و الكتاب الذي يحمل نفس الاسم) من قبل راشيل أندرو: كل ما تعرفه عن CSS هو الخطأ

إذا كنت بحاجة إلى تخطيط متناسق في المتصفحات القديمة التي لا تدعم CSS الجداول تحتاج إلى أمرين:

  1. جعل الخاص بك "صف الجدول" عنصر واضحة الداخلية طرحت العناصر.

    أبسط طريقة للقيام بذلك هو وضع overflow: hidden والتي تأخذ الرعاية من معظم المتصفحات ، zoom: 1 لتحريك hasLayout الملكية في الإصدارات القديمة من إنترنت إكسبلورر.

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

  2. التوازن ارتفاع اثنين "خلية الجدول" العناصر.

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

    فو الأعمدة هو أبسط النهج يعمل بشكل جيد جدا عندما عرض واحد أو كل من الأعمدة الثابتة.تقنية أخرى تتواءم بشكل أفضل مع عرض متغير من الأعمدة (على أساس نسبة مئوية أو م الوحدات) ولكن يمكن أن يسبب مشاكل في بعض المتصفحات إذا كنت وصلة مباشرة إلى المحتوى الخاص بك داخل الأعمدة (مثلا ، إذا كان العمود الوارد <div id="foo"></div> و كنت مرتبطة #foo)

هنا مثال على استخدام الحشو/هامش تقنية التوازن ارتفاع الأعمدة.

html, body {
  height: 100%;
}

.row {
  zoom: 1;          /* Clear internal floats in IE */
  overflow: hidden; /* Clear internal floats */
}

.right-column,
.left-column {
  padding-bottom: 1000em;  /* Balance the heights of the columns */
  margin-bottom: -1000em;  /*                                    */
}

.right-column {
  width: 20%;
  float: right;
}

.left-column {
  width: 79%;
  float: left;
}
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>
<div class="row">
  <div class="right-column">Right column content</div>
  <div class="left-column">Left column content</div>
</div>

هذا Barcamp تجريبي من قبل ناتالي Downe قد تكون مفيدة أيضا عند معرفة كيفية إضافة أعمدة إضافية وجميلة تباعد الحشو: متساوية الطول الأعمدة وغيرها من الحيل (كما أنها المكان الأول الذي تعلمت عن الهامش/الحشو خدعة توازن العمود هايتس)

تخليت عن دقة CSS و تستخدم قليلا مسج:

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);

هنا مثال على قدم المساواة-ارتفاع الأعمدة - متساوية الطول الأعمدة - إعادة النظر

يمكنك أيضا التحقق من فكرة "فو الأعمدة" وكذلك - فو الأعمدة

لا تذهب الجدول الطريق.إذا لم يكن جداول البيانات, لا تعامل على هذا النحو.انها سيئة الوصول والمرونة.

كان عندي نفس المشكلة على موقعي (المكونات وقح).

كان nav قسم "تعويم:الحق" و الجزء الرئيسي من الصفحة صورة خلفية عن 250px عبر الانحياز إلى الحق "repeat-y".ثم أضاف شيئا مع "واضحة:كل" إليه.هنا هو W3Schools ، CSS الملكية واضحة.

أنا وضعت هذا واضح في الجزء السفلي من صفحة "" تصنف شعبة.صفحتي المصدر تبدو شيئا مثل هذا.

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

آمل أن يساعد :)

لا حاجة لكتابة css الخاص ، هناك مكتبة تسمى "التمهيد css" من خلال الاتصال أنه في HTML الخاص بك رئيس القسم ، يمكننا تحقيق العديد من ستلينغس ، وهنا مثال على ذلك:إذا كنت ترغب في توفير عمودين في صف واحد ، يمكنك ببساطة القيام بما يلي:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
</div>

هنا md تقف متوسطة الجهاز ، يمكنك استخدام col-sm-6 على أجهزة أصغر و col-xs-6 لمزيد من الأجهزة الصغيرة

الإجابة على سؤالك هو أنه يجب تعيين ارتفاع من 100% إلى الجسم و html الوسم ، ثم تعيين الارتفاع إلى 100% على كل عنصر div كنت تريد أن تجعل 100% ارتفاع الصفحة.

2 تخطيط العمود هو قليلا من الصعب الحصول على عمل في CSS (على الأقل حتى CSS3 هو عملي.)

العائمة اليسار واليمين العمل إلى حد ما ، لكنها لن تسمح لك لتوسيع الخلفية.لجعل خلفيات البقاء الصلبة ، سيكون لديك لتنفيذ تقنية تعرف باسم "فو الأعمدة" الذي يعني في الأساس الخاص بك الأعمدة نفسها لن يكون لها خلفية الصورة.2 الأعمدة الموجودة داخل الوالد العلامة.هذا الوالد العلامة يعطى صورة الخلفية التي تحتوي على 2 عمود الألوان التي تريدها.جعل هذه الخلفية فقط كما كبيرة كما كنت في حاجة إليها (إذا كان لون خالص ، 1 بكسل عالية) ويكون ذلك repeat-y.AListApart كبيرة تجول على ما هو مطلوب أن تجعل من العمل.

http://www.alistapart.com/articles/fauxcolumns/

أستطيع أن أفكر في خيارات 2

  1. استخدام جافا سكريبت لتغيير حجم أصغر عمود على تحميل الصفحة.
  2. وهمية ارتفاعات متساوية من خلال وضع background-color عمود على الحاوية <div/> بدلا من ذلك (<div class="separator"/>) مع repeat-y

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

هنا مثال:

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

هذا يجب أن تعمل من أجلك:تعيين الارتفاع إلى 100% في css الخاص بك من أجل html و body عناصر.ثم يمكنك ضبط ارتفاع لتلبية الاحتياجات الخاصة بك في div.

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

يكفي أن مجرد استخدام خاصية css width أن تفعل ذلك.

هنا مثال:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>


.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}
<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

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