نمایش نسخه قابل چاپ
میخوام یک body داشته باشم که head و width برابر 100% باشه و بهش بتونم border برم تا مقل قاب عکس بشه ( البته این کار رو مینم تا رسپانسیو بشه ;) ) . تا ال آن با jquery میومدم این کار رو انجام میدادم . اما خسته کننده و طولانی هست . با سی اس اس نمی شه ؟ ساپورت مرورگر ها هم برام تقریبا مهمه
اینم نمونه ای از پروژم : https://jsfiddle.net/q3p0vh58/
ضمیمه ...
با سلام
به راحتی قابل انجامه . یک توضیح ساده میدم خدمتتون بعدشم یه نمونه کد براتون میزارم
یک div تعریف کنید و یک کلاس یا آیدی براش تعریف کنید
سپس top و bottom و left و right اون المنتی که ساختید رو برابر با 0 کنید . حتما important رو فراموش نکنید که قابل تعویض توسط المنت های دیگر نباشه
سپس position رو روی fixed قرار بدید و مجددا important رو فراموش نکنید
سپس width و height رو با استفاده از important روی 98.5% و 96.8% قرار بدید و بعدشم برای اینکه یک موقع المنت زیر المنت های دیگه نیوفته حتما z-index رو در بالاترین حد ممکن قرار بدید
در آخر هم margin-left و margin-top و margin-bottom و margin-right رو حتما 0% یا 0px کنید با important
بعدشم تغییرات مورد نظرتونو مثل border ها و ... روی اون المنت اعمال کنید . اینم نمونه کد که روی لوکال نوشته شده و تست کردم :
کد PHP:<!DOCTYPE html>
<html>
<head>
<title>Sample - TkStar</title>
<meta charset="utf-8" />
<style type="text/css">
.ghab{
left:0 !important;
top:0 !important;
bottom:0 !important;
right:0 !important;
position:fixed !important;
background:red !important;
z-index:99999 !important;
height:96.8% !important;
width:98.5% !important;
margin-top:0% !important;
margin-left:0% !important;
margin-right:0% !important;
margin-bottom:0% !important;
border:10px solid brown !important;
}
</style>
</head>
<body>
<div class="ghab">asd</div>
</body>
</html>
کد PHP:html, body {
width:100%;
height:100%;
}
body {
border:10px solid red;
}
کد HTML:html {
height: 100%;
}
body {
min-height: 100%;
}
سلام
به html ارتفاع 100 درصد بدید.
برای این که ضخامت بردر هم جزو طول و عرض بادی حساب بشه، بهش box-sizing: border-box بدید. مارجین پیش فرض بادی رو هم صفر کنید.
دموی بروز شده ی شما:
https://jsfiddle.net/sabeti05/q3p0vh58/3/