على عمودين الصفحة كيف يمكن أن تنمو اليسار div على نفس الارتفاع من حق div باستخدام CSS أو جافا سكريبت ؟
https://stackoverflow.com/questions/35699
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أحاول جعل عمودين الصفحة باستخدام شعبة التخطيط القائم على (لا الجداول من فضلك!).المشكلة هي أنني لا يمكن أن تنمو اليسار div لتتناسب مع الارتفاع من حق واحد.حقي div عادة لديه الكثير من المحتوى.
وهنا يقترن بانخفاض مثال على قالب بلدي لتوضيح المشكلة.
<div style="float:left; width: 150px; border: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>
المحلول
استخدام مسج على هذه المشكلة ؛ فقط استدعاء هذه الدالة في دالة جاهزة:
function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height + "px");
}
نصائح أخرى
الخاص بك أبسط الجواب يكمن في النسخة المقبلة من css (3), حاليا لا يدعم المتصفح.
الآن أنت هبط إلى حساب ارتفاعات في جافا سكريبت و وضع لهم على الجانب الأيسر.
إذا كان التنقل من المهم جدا أن توضع في مثل هذه الطريقة, تشغيله على طول الجزء العلوي.
يمكنك أيضا أن تفعل خدعة بصرية عن طريق تحريك الحدود الحاوية أكبر الداخلي ، وجعله يبدو أن نفس الحجم.
هذا يجعلها تبدو هي نفسها ، ولكن الأمر ليس كذلك.
<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
<div style="float:left; width: 150px; border-top: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
...
</div>
<div style="clear:both;" ></div>
</div>
فإنه يمكن القيام به في CSS!لا تدع الناس اقول لكم خلاف ذلك.
أسهل وأكثر خالية من الألم طريقة للقيام بذلك هو استخدام فو الأعمدة الأسلوب.
ومع ذلك ، إذا كان هذا الحل لا يعمل بالنسبة لك ، أنت تريد أن تقرأ على هذه التقنية.ولكن حذر من أن يكون هذا هو نوع CSS hackery التي سوف تجعلك تستيقظ في عرق بارد في منتصف الليل.
وجوهر ذلك هو أنه يمكنك تعيين كمية كبيرة من الحشو على الجزء السفلي من العمود و سلبي الهامش من نفس الحجم.ثم وضع الأعمدة في وعاء يحتوي overflow: hidden تعيين.أكثر أو أقل الحشو/الهامش القيم تسمح مربع للحفاظ على توسيع حتى تصل إلى نهاية المجمع (والتي يتم تحديدها من قبل عمود مع معظم المحتوى) ، أي مساحة إضافية تم إنشاؤها بواسطة الحشو قطع كما تجاوز.فإنه لا معنى كبير, أعرف...
<div id="wrapper">
<div id="col1">Content</div>
<div id="col2">Longer Content</div>
</div>
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
تأكد من قراءة المادة بكاملها أنا مرتبطة ، هناك عدد من المحاذير وغيرها من مسائل التنفيذ.انها ليست جميلة الأسلوب ، لكنه يعمل بشكل جيد إلى حد ما.
يمكنك أن تفعل ذلك في مسج بسيط حقا ولكن أنا لست متأكدا من شبيبة ينبغي أن تستخدم مثل هذه الأمور.فإن أفضل طريقة هي أن تفعل ذلك مع css نقية.
نلقي نظرة على فو الأعمدة أو حتى السائل فو الأعمدة
أيضا أسلوب آخر(لا يعمل على IE6) هو موقف:قريب الحاوية الأصل.الطفل حاوية(nav قائمة في هذه الحالة) ينبغي وضع المطلقة القسري لاحتلال الفضاء كله مع 'top:0;أسفل:0;'
هذا هو واحد من تلك معقولا تماما, الأشياء البسيطة التي المغلق لا يمكن القيام به.فو الأعمدة ، كما اقترح سيلفيو ، hacky ولكن وظيفية الحل.سيكون من الجميل إذا في يوم من الأيام كان هناك طريقة
div.foo {
height: $(div.blah.height);
}
هذا يمكن ينبغي القيام به مع css باستخدام ألوان الخلفية
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>
@hoyhoy
إذا كان مصمم أن يجعل هذا العمل في html ، ثم انه يمكن أن يكون هذا التصميم.إذا كان هو سيد الحقيقية من تصميم مواقع الإنترنت, سوف ندرك أن هذا هو وجود قيود على وسائل الإعلام ، الفيديو غير ممكن في مجلة الإعلانات.
إذا كان يود أن محاكاة الوزن من خلال إعطاء 2 الأعمدة متساوية في الأهمية ، من تغيير الحدود ، بحيث تظهر أن تكون من نفس الوزن ، وجعل الألوان من الحدود النقيض من لون الخط من الأعمدة.
ولكن كما جعل العناصر المادية نفس الارتفاع ، يمكنك أن تفعل ذلك فقط مع الجدول بناء أو وضع مرتفعات في هذه النقطة في الوقت المناسب.لمحاكاة لهم الظهور بنفس الحجم, لا يجب أن تكون نفس الحجم.
تعال إلى التفكير في الأمر, أنا لم أفعل ذلك مع أسفل الحدود على العمود.انها على الارجح مجرد تفيض على قطع.قد تريد أن يكون أسفل الحدود تأتي من عنصر مستقل هذا جزء من العمود المحتوى.
على أي حال, أنا أعلم أنها ليست مثالية سحري الحل.عليك أن تلعب معها ، أو الإختراق حول عيوبه.
كما يوجد جافا سكريبت القائمة على الحل.إذا كان لديك مسج, يمكنك استخدام أدناه المساعد.
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight + "px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$('.column1, .column2, .column3').equalHeights();
});
</script>
أنا استخدم هذا إلى محاذاة 2 الأعمدة مع ID "مركز" و "الحق":
var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
}
آمل أن يساعد.
أن تنمو القائمة اليسرى div مع نفس الارتفاع المحتوى المناسب div.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var height = $(document).height(); //optionally, subtract some from the height
$("#menu").css("height", (height) + "px");
$("#content").css("height", (height) + "px");
});
</script>
<style type="text/css">
<!--
html, body {
font-family: Arial;
font-size: 12px;
}
#header {
background-color: #F9C;
height: 200px;
width: 100%;
float: left;
position: relative;
}
#menu {
background-color: #6CF;
float: left;
min-height: 100%;
height: auto;
width: 10%;
position: relative;
}
#content {
background-color: #6f6;
float: right;
height: auto;
width: 90%;
position: relative;
}
#footer {
background-color: #996;
float: left;
height: 100px;
width: 100%;
position: relative;
}
-->
</style>
</head>
<body>
<div id="header">
i am a header
</div>
<div id="menu">
i am a menu
</div>
<div id="content">
I am an example of how to do layout with css rules and divs.
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
</div>
<div id="footer">
footer
</div>
</body>
</html>
