سلام .
خواهش می کنم .
من الآن با اینترنت اکسپلورر 7 و فایرفاکس 3.5 و اپرا 10 چک کردم .
در همه درست بود به جز این اکسپلورر دیونه .
ولی فکر کنم با ورژن 8 کار کنه .
متاسفانه برای هر دو حالت عرض و ارتفاع مشکل داره .
خلاصه شرمنده اگر که در اکسپلورر کار نمی کنه .
موفق باشید .
در کدی که e-boy جان زحمت کشید، به علت دادن مقدار absolute به خصیصه position ، این رویداد اتفاق افتاد.
اما برای رسیدن به راه حل نیاز شما، نیازی به استفاده از خصیصه absolute نیست.
شما می خواهید مقدار ارتفاع یک Box رو با ارتفاع مرورگر ست کنیم، کافیست که از راه آن وارد شویم و جور دیگری به IE بفهمانیم:
در ابتدا مقدار ارتفاع body را 100 در صد در نظر میگیریم:
HTML:
html, body { height:100%;}
سپس حد اقل ارتفاع Box مورد نظر خودمون را با استفاده از خصیصه min-height هم 100 در صد نظر میگیرم، اما مشکل این خصیصه این است که در مرورگر IE پشتیبانی نمی شود:
HTML:
#box {min-height:100%;}
برای حل مشکل این خصیصه، به IE می فهمانیم که ارتفاع BOX ما که در html وجود دارد را 100 در صد در نظر بگیرد:
سلام
من روی این قالب وقتی این روش رو پیاد میکنم جواب نمیگیرم
HTML:
<!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">
<!--
@charset "utf-8";
* {
padding:0;
margin:0;
border:0;
}
html, body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
height: 100%;
}
#main {
min-height:100%;
background:red;
width:550px;
float: left;
}
* html #main {
height:100%;
}
#container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB;
height: 500px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
#footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p> </p>
<p> </p>
<!-- end #sidebar1 --></div>
<div id="main">
<h1> Main Content </h1>
<p> </p>
<h2> </h2>
<p> </p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
اون div با آیدی main باید تا آخر بیاد پایین که نمیدونم مشکل از کجاست
ممون میشم اگه مشکلش رو بگین
