تحتاج CSS ارتفاع الشريط الجانبي في التوسع مع المحتوى
https://stackoverflow.com/questions/1610710
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
ولدي تخطيط عمودين، مع الشريط الجانبي الرمادي على اليمين. أحتاج ارتفاع الشريط الجانبي لتوسيع عندما يتم زيادة ارتفاع العمود الأيسر (بسبب المحتوى الذي يتم توسيع حيوي). أنا يمكن أن تجعل الشريط الجانبي تناسب صفحة ثابتة، ولكن أنا لا يمكن الحصول عليها لزيادة الحجم مع بقية الصفحة. فعلت بعض غوغلينغ، لكنه لم يستطع العثور على عمل حول التي عملت بالنسبة لي.
لا أحد يعرف كيفية القيام بذلك؟
المحلول
وهذه مشكلة شائعة عند استخدام عناصر div لهذا النوع من التخطيط.
إذا كنت جوجل "عمود فو" يجب أن تحصل على بعض الإجابات.
وعلى سبيل المثال. http://www.alistapart.com/articles/fauxcolumns/
نصائح أخرى
وهذا قد يكون قليلا قبالة لكن إذا كنت تستخدم مسج على موقع الويب الخاص بك يمكنك تنفيذ عملية حسابية سريعة وتغيير جميع عناصر div تقاسم فئة مماثلة إلى أقصى ارتفاع:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
ولقد لازمت هذه المشكلة لفترة من الوقت، وأنا كتبت مقالا حول هذه المشكلة: <لأ href = "http://www.diovo.com/2009/08/done-with-faux-columns/" يختلط = "noreferrer"> تم مع الأعمدة فو . هنا هو ما قلت:
<اقتباس فقرة>وحل قائم جافا سكريبت لهذا المشكلة ليست أسوأ من أي شيء آخر المحلول. في الواقع إذا كنت تستخدم وجافا سكريبت، قد حفظ بضع ساعات إحباط محاولة للحصول على الأشياء عمل. الناس سوف يحذرك ضد ذلك بقوله "ماذا سيحدث إذا تحولت خروج المستخدم جافا سكريبت؟ ". صدقوني، إذا تحولت المستخدم الخروج جافا سكريبت، أكثر من شبكة الإنترنت مكسورة بالنسبة له على أي حال. الشريط الجانبي الخاص بك لا يهم بالنسبة له.
وكما cballou المذكورة، وأبسط طريقة للقيام بذلك الشيء هو استخدام رمز مسج:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
ولقد غيرت background-color إلى نفس لون الشريط الجانبي، على أن صفحة معينة، على الرغم من أن لدي خلفيات عن كل ما عندي من أقسام بدلا من الخلفية الشاملة واحد. ولكن هذا قد لا تعمل لصالح الجميع.
في بلدي الأنماط،
.sidec
{
background-color:#123456;
}
في صفحة HTML بلدي،
<body class="sidec">
content....
</body>
ورأيت مؤخرا حل مبتكر للغاية لهذه المشكلة باستخدام CSS خصائص position:absolute وborder.
وبالتأكيد تستحق التدقيق بها لمعرفة ما اذا كان يعمل للكم.
الرابط: HTTP: //woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
ولست متأكدا إذا كان هذا سيساعد، وأنا مبتدئ. ومع ذلك، عندما تعاني من الحصول على الشريط الجانبي لإظهار المحتوى كله عندما تضاعف حجمه فعلت ما يلي: كنت تغيير بلدي الطول والعرض مع أي رد حتى لقد غيرت الدرجة. وصفي مدرجة SB عرض الإطار SB. حتى عندما غيرت صفي لقراءة العرض SB ارتفاع SB أنه من المناسب أن المحتوى الخاص بي بدلا من حجم الإطار الأصلي. كما أنني حاولت SB ماكس بينالي الشارقة عرض مع عملت أيضا، ولكنه أخرج شريط القوائم تذييل بلدي (وهذا يعني أنها لن تظهر بعد الآن). عدت إلى ارتفاع SB عرض SB، وكل شيء على ما يرام. هذا الابتدائية السوبر المخادع لكم جميعا وأنا متأكد، ولكن فقط في حالة وجود مبتدئ آخر هذه القراءة التي لا يفهم الكثير عن الكود مثلي ... آمل أن يساعد هذا =) عطلات سعيدة الجميع! العناق، تارا
وانا التخمين تريد تطبيق تأثير معين على التصميم الخاص بك بحيث يتطلب كلا العمودين لتغيير حجم معا. إذا كنت ترغب في تغيير قيم ارتفاع الأعمدة حيوي، وأشك في أنه سوف يعمل ببساطة مع المغلق إلا إذا قمت بتطبيق بعض جافا سكريبت لسيطرة النمط.
وكما اقترح دال، لا تبدو في وصلة على أعمدة فو. وكما يوحي اسمها، والحل هو ليس كثيرا حول تعديل ارتفاع الأعمدة. بدلا من ذلك، يعطي "الوهم" التي تظهر كل الأعمدة لتكون من نفس الارتفاع بينما الحقيقة أنها ليست - ومع استخدام البلاط من صورة الخلفية
والفكرة هي ليست هناك حاجة لتعقيد علامة المتابعة. بنية بسيطة مع لمسة من "الوهم" مع الصور هو ممارسة شائعة في تصميم المواقع الإلكترونية.
والتحيات، يونان
ومع الموقف السيئ تجاه أعضاء جدد هنا أتوقع أن barracked لهذه الإجابة، وهنا يذهب. حصلت تغلب على هذه المشكلة عن طريق إنشاء صورة خلفية 960px واسعة 1PX عالية مع اثنين من الألوان أنا في حاجة للأعمدة في كل منها بعرض (780px 180px و). وبعد ذلك استخدم هذا كصورة خلفية للحاوية بلدي المتكررة على المحور الصادي وجعل المحتوى والحق في الشريط الجانبي خلفية اللون: شفاف
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
وأنا واثق من أن هذا الأسلوب له حدوده ولكنه يعمل تماما على كل صفحاتي.
ومن الممكن أنني لم أوضح ذلك جيدا، إذا كان الأمر كذلك، يكون لطيفا عن ذلك سوف يحلو لك. وسوف endevour للتوسع في طريقة بلدي (والذي هو على الارجح المعروف بالفعل).
