PDA

View Full Version : سوال: مشگل در ارتفاع در طراحی با فرم بوت استرپ



RezaNumber
پنج شنبه 02 اردیبهشت 1395, 04:09 صبح
یک قالب به فرم ورک بوت استرپ طراحی و کد کردم ، توی یک بخشش به مشگل برخوردم !

وقتی ارتفاع مرورگر را به کنترل + شیفت + ام از 900 میبرم بالا فوتر که در پایین ثابت هست میاد بالا و زیرش فضای خالی ایجاد میشه ، عکس گذاشتم تا بهتر متوجه بشید !
میخوام با تغییر ارتفاع سر جاش ثابت در پایین باشه !

http://itpro.ir/resources/images/275dcee621fb4a0cad287e6fd1fc2966



<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"><style>body { color:#fff; font-family:'Tahoma'; height:50%; width:100%; margin:0; padding:0; }a:link { text-decoration:none;}a:visited { text-decoration:none;}a:hover { text-decoration:none;}a:active { text-decoration:none;}.footer { background-color:rgba(0, 0, 0, 0.3); padding:10px; border-top:3px solid rgba(80, 70, 70, 0.2); margin-top:20px;}.footer_copyright { direction:rtl; width:100%; font-family: 'Dinar'; direction: rtl; text-align: justify;}.footer_copyright a { color:#fff;}.footer_copyright a:hover { color:#B7670D;}.footer_copyright p { color:#fff; margin:0 0; line-height:30px;}</style> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container-fluid footer"><!-- Container-fluid --> <div class="container"> <div class="row text-center"><!-- Row --> <div class="footer_copyright text-center"> <p>این قالب توسط <a href="http://xxx.ir/">xxx</a> به صورت اختصاصی طراحی شده است و تمامی حقوق مادی و معنوی آن متعلق به <a href="http://xxx.ir/">xxx</a> می باشد !</p> <p>طبق ماده 12 فصل سوم قانون جرائم رایانه ای هرگونه کپی برداری بدون مجوز پیگرد قانونی خواهد داشت !</p> </div> </div> </div><!-- Container --> </div><!-- Container-fluid --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>



این هم از کد بنده دقیقا از انتهای قالبم برداشتم و دقیقا هم استایل قالبم همینه !
توی انجمن های دیگه مطرح کردم جوابی نگرفتم ظاهرا هیچی حالیشون نیست برداشتن انجمن زدن !

مشگل هنوز پابرجاست !

موفق باشید

RezaNumber
پنج شنبه 02 اردیبهشت 1395, 09:21 صبح
سلام

کسی نیست پاسخ بده ؟؟؟
آقای سعید کشاورز لااقل شما جواب بدید که آموزش هاتون رو در مورد بوت استرپ دیدم و میدونم بلدید !

موفق باشید

سعید کشاورز
پنج شنبه 02 اردیبهشت 1395, 11:06 صبح
سلام دوست عزیز
ببین شما وقتی ارتفاع رو ببری بالا ، فوتر بالا نمیاد
بلکه اون محتوی اصلی شما که فوتر هم شاملش میشه ارتفاعش از Body شما که 900 به بالا میذاری کمتر میشه
حالا شما یه راه داری
ببین به صورت ساده سایت 3 تا قسمت دار
هدر
بدنه اصلی
فوتر
شما باید حداقل ارتفاع های این موارد رو جوری تنظیم کنی که از عدد 900 یا هرچیزی که مد نظر شما هست بیشتر بشه
کثلا مانیتورهای Full HD
1200*1920 هستن
پس مجموع این مواردی که گفتم ارتفاعش باید 1200 بشه تا فوتر دقیقا به انتهای صفحه بچسبه
مثلا هدر رو 200 تا در نظر بگیر
بدنه اصلی رو 800 تا
فوتر رو 200
..........................
اینجوری دیگه ارتفاع سایت شما با ارتفاه مرورگر کاربر تنظیم میشه..

RezaNumber
پنج شنبه 02 اردیبهشت 1395, 11:16 صبح
سلام دوست عزیز
ببین شما وقتی ارتفاع رو ببری بالا ، فوتر بالا نمیاد
بلکه اون محتوی اصلی شما که فوتر هم شاملش میشه ارتفاعش از Body شما که 900 به بالا میذاری کمتر میشه
حالا شما یه راه داری
ببین به صورت ساده سایت 3 تا قسمت دار
هدر
بدنه اصلی
فوتر
شما باید حداقل ارتفاع های این موارد رو جوری تنظیم کنی که از عدد 900 یا هرچیزی که مد نظر شما هست بیشتر بشه
کثلا مانیتورهای Full HD
1200*1920 هستن
پس مجموع این مواردی که گفتم ارتفاعش باید 1200 بشه تا فوتر دقیقا به انتهای صفحه بچسبه
مثلا هدر رو 200 تا در نظر بگیر
بدنه اصلی رو 800 تا
فوتر رو 200
..........................
اینجوری دیگه ارتفاع سایت شما با ارتفاه مرورگر کاربر تنظیم میشه..

تشکر فراوان بابت جواب :

پس این کد چه جوری فوترش ثابت شده است در حالی که متنی داخل بدنه اصلی و هدر وجود ندارد !؟


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | تکنیک هدایت فوتر به پائین صفحه</title>
<!-- http://webgoo.ir -->
<style type="text/css">
html, body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
margin:0;
padding:0;
height:100%;
}
.wrapper{
min-height:100%;
height:auto;
margin:0 auto -50px auto;
background-color:#F0F0F0;
}
.footer, .wrapper:after{
width:100%;
height:50px;
background-color:#369;
color:#FFF;
}
.wrapper:after{
content:"";
display:block;
background-color:#F0F0F0;
}
hr{
border:0;
border-bottom:1px dashed #CCC;
}
</style>
</head>
<body>
<div class="wrapper">
قسمت اصلی قالب
<hr>
محتوای قالب را در این قسمت درج کنید.
</div>
<div class="footer">
قسمت فوتر قالب
<hr>
نکته: این روش با تمام مرورگرهای استاندارد سازگار است (شامل مرورگر قدیمی و غیر استاندارد IE 6 نیز می شود).
</div>
</body>
</
html>

RezaNumber
پنج شنبه 02 اردیبهشت 1395, 13:54 عصر
سلام

؟

اینی که شما جناب سعید کشاورز فرمودید استاندارد هست اینکار رو کنم ؟

منتظر پاسخ و کماکان رفع مشگلم !

موفق باشید

ravand
پنج شنبه 02 اردیبهشت 1395, 14:44 عصر
نیازی نیست شما ارتفاع رو به درصد بدی. چون برخی مواقع وقتی مثلا صد در صد میدی برخی از قسمت هاش توی نسخه ی مبایل که نباید صد در صد بشه . صد در صد میشه و ضایع است.
شما بیا و min-height را به پیکسل بده. خودش توی نسخه ی مبایل خودکار با زیاد شدن مطالب ارتفاع هم بزرگتر میشه.