idocsidocs
چهارشنبه 10 آذر 1389, 15:50 عصر
سلام
من برای قالب سایتم از کدهای زیر استفاده می کنم، کد سی اس اس باعث می شه که فوتر همیشه به پایین صفحه مرورگر بچسبه (هم زمانیکه ارتفاع محتویات سایت کمتر از ارفتاع مانیتور باشه و چه زمانی که ارتفاع محتویات سایت بیشتر از ارتفاع مانیتور باشه).
این کد یه ایراد داره و اونم زمانیه که رزیولیشن صفحه رو تغییر می دیم، مثلا از
1024 by 768
به
1152 by 864
تغییر می دیم. در این حالت محتویات صفحه بجای اینکه وسط مانیتور قرار بگیرن، سمت راست یا چپ مانیتور قرار می گیرن.
شما راهی به نظرتون نمی رسه که بتونید بعد از تغییر ریولیشن، محتویات صفحه در وسط نمایش داده بشن و فوتر به پایین صفحه بچسبه؟
body {
margin: 0;
padding: 0;
}
html, body, #contents {
max-width:900px;
min-width:780px;
min-height: 100%;
}
html>body, html>body #contents {
height: auto;
}
#all {
position: absolute;
top: 0;
left: 0;
}
#right {
position: absolute;
top: 1em;
right: 1em;
width: 14em;
text-align:right;
}
#content {
margin-top:1em;
margin-left: 2em;
margin-right: 16em;
margin-bottom: 5em;
}
#header {
position: absolute;
top: 0;
width:100%;
}
#footer {
position: absolute;
bottom: 0;
width:100%;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="all">
<div id="header">header</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="footer">footer</div>
</div>
</body>
</html>
من برای قالب سایتم از کدهای زیر استفاده می کنم، کد سی اس اس باعث می شه که فوتر همیشه به پایین صفحه مرورگر بچسبه (هم زمانیکه ارتفاع محتویات سایت کمتر از ارفتاع مانیتور باشه و چه زمانی که ارتفاع محتویات سایت بیشتر از ارتفاع مانیتور باشه).
این کد یه ایراد داره و اونم زمانیه که رزیولیشن صفحه رو تغییر می دیم، مثلا از
1024 by 768
به
1152 by 864
تغییر می دیم. در این حالت محتویات صفحه بجای اینکه وسط مانیتور قرار بگیرن، سمت راست یا چپ مانیتور قرار می گیرن.
شما راهی به نظرتون نمی رسه که بتونید بعد از تغییر ریولیشن، محتویات صفحه در وسط نمایش داده بشن و فوتر به پایین صفحه بچسبه؟
body {
margin: 0;
padding: 0;
}
html, body, #contents {
max-width:900px;
min-width:780px;
min-height: 100%;
}
html>body, html>body #contents {
height: auto;
}
#all {
position: absolute;
top: 0;
left: 0;
}
#right {
position: absolute;
top: 1em;
right: 1em;
width: 14em;
text-align:right;
}
#content {
margin-top:1em;
margin-left: 2em;
margin-right: 16em;
margin-bottom: 5em;
}
#header {
position: absolute;
top: 0;
width:100%;
}
#footer {
position: absolute;
bottom: 0;
width:100%;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="all">
<div id="header">header</div>
<div id="content">content</div>
<div id="right">right</div>
<div id="footer">footer</div>
</div>
</body>
</html>