PDA

View Full Version : ارتفاع اتوماتیک در css


aliblue
شنبه 25 شهریور 1391, 07:19 صبح
این سوالو در بخش طراحی وب پرسیدم ولی چون کسی جواب نداد اینجا میپرسم.
مثلا دو تا div داریم یکی برای مطالب سایت یکی هم در پایینش برای footer.می خواهم وقتی داخل divمطالب متنی قرار نداشت یا کم بود footer باز هم در پایین مرورگر نمایش داده بشه.مثلا min-height دیو مطالب رو برابر 700 پیکسل قرار میدم.اگه مرورگر در حالت بزرگ(Maximize)باشه درست نشون داده میشه ولی اگه کوچک باشه،کاربر باید اسکرول کنه و بره پایین تا footer رو ببینه.اگه هم اندازه رو به درصد بدم اعمال نمیشه و انگار اصلا min-height ندادم بهش.مثل عکس زیر:
92888
sanaz.dadkhah
شنبه 25 شهریور 1391, 07:44 صبح
سلام ببین با overflow تو css کارت حل میشه؟
aliblue
شنبه 25 شهریور 1391, 08:40 صبح
استفاده از overflow رو بلد نیستم میشه بیشتر توضیح بدین؟در ضمن ترتیب div ها به صورت زیره که داخل div class="post" مطلب مورد نظر قرار داره.


<body>
<div id="templatemo_content_wrapper">


<div id="templatemo_content">

<div class="section_w920 fl margin_right_20">

<div class="post">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>
</div>
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
Copyright © 2024 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
</div> <!-- end of footer -->
</div> <!-- end of footer wrapper -->
</body>
BahmanDB
شنبه 25 شهریور 1391, 15:52 عصر
از table استفاده كن 100% كار ميكنه (درسته خوب نيست از table استفاده كنيم ) اما با اون حل ميشه
alirat
شنبه 25 شهریور 1391, 23:37 عصر
این طور که متوجه شدم شما باید footer رو fix کنی bottom
در css وارد کن position:fixed و bottom رو 0px
aliblue
یک شنبه 26 شهریور 1391, 09:32 صبح
اونطوری همیشه پایین هست حتی اگه صفحه طولانی باشه و لازم باشه اسکرول کنیم.من میخوام بسته به اندازه صفحه اگه دیدن پایین صفحه نیاز به اسکرول داشت با اسکرول کردن پایین بریم و فوتر رو ببینیم ولی اگه صفحه کوتاه بود بدون اسکرول و در پایین ترین قسمت صفحه باشه.
m_kalantar.cs
یک شنبه 26 شهریور 1391, 09:40 صبح
درود
display:inline-block برای دیو مطلب مورد نظر امتحان کنید
aliblue
یک شنبه 26 شهریور 1391, 10:08 صبح
این دستور چه کاری انجام میدهد؟امتحان کردم فرقی نکرد.
m_kalantar.cs
یک شنبه 26 شهریور 1391, 10:22 صبح
اگر امکان دارد کد های css ی که استفاده می کنید را بذارید اینجا
aliblue
یک شنبه 26 شهریور 1391, 10:30 صبح
اگه اندازه رو به درصد بشه داد مشکل حله.ولی مشکل اینه که اگه مطالب کم باشه و مرورگر اندکی بزرگتر باشه،تگ های Body و Html کل اندازه مرورگر رو در بر نمیگیره بلکه فقط اون قسمت آبی رنگ تو عکس زیر هستند.92941

برای همین اگه min-height تگ مطلب رو به درصد بدم،چون اندازه اون قسمت آبی ثابته و به مرورگر بستگی نداره،تفاوتی ایجاد نمیشه.
باید چیکار کنم که وقتی اندازه ارتفاع یک عنصر رو به درصد میدم،اندازه کل مرورگر رو درنظر بگیره تا اینجوری نشه؟
aliblue
یک شنبه 26 شهریور 1391, 20:05 عصر
یه مقدار خاصیت height,min_height بعضی از تگ ها رو دستکاری کردم بهتر شد ولی هنوز اگه مرورگر بزرگ باشه پایینش خالی میمونه.یه فایل ضمیمه کردم.ممنون میشم اگه بررسی کنین و بگین کجاهاشو باید تغییر بدم تا درست بشه.


92970