plague
Member
سلام
من یه صفحه دارم شامل یه div والد به نام wrap و دوتادیو sidebar و main داخل اون .
من میخاستم که main کل ارتفاع صفحه رو بپوشونه برایه همین body height , main heaight , wrap height رو برابر 100% گزاشتم
ولی مشکل اینه که همیشه main از دیو والد یعنی wrap بیرون میزنه و بزرگتره .
این صفحه :
http://xmaxx.persiangig.com/test.html
(فوتر clear : both هست ولی بازم جواب نمیده )
اینم کدش :
من یه صفحه دارم شامل یه div والد به نام wrap و دوتادیو sidebar و main داخل اون .
من میخاستم که main کل ارتفاع صفحه رو بپوشونه برایه همین body height , main heaight , wrap height رو برابر 100% گزاشتم
ولی مشکل اینه که همیشه main از دیو والد یعنی wrap بیرون میزنه و بزرگتره .
این صفحه :
http://xmaxx.persiangig.com/test.html
(فوتر clear : both هست ولی بازم جواب نمیده )
اینم کدش :
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;
height: 50%;
margin: 0px;
padding: 0px;
}
* html #main {
height:100%;
margin: 0px;
padding: 0px;
}
#wrap {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF; /* 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. */
height: 100%;
margin-right: auto;
margin-left: auto;
}
#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. */
}
#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;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
height: 500px;
margin: 0px;
}
#footer {
background:#DDDDDD;
clear: both;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
height: 80px;
border: 2px solid #000;
margin: 0px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a wrap that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
h1,h2,h3,h4,h5,h6,p {
margin:0;
}
-->
</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="wrap">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
</div>
<div id="main">
<h1> Main Content </h1>
-
</div>
<div style="clear:both"></div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
