PDA

View Full Version : مشکل در دو قسمت کردن صفحه با استفاده از CSS به شکلی که فقط قسمت پایین اسکرول بخورد



arashkey
جمعه 03 تیر 1390, 16:13 عصر
با سلام
من می خوام یه کد css بنویسم که در اون صفحه به دو قسمت تقسیم بشه
قسمت بالای صفحه که یک اندازه ثابت مثلا 300 پیکسل داشته باشه ، و قسمت پایینی که باقی صفحه رو بپوشونه
دقت داشته باشید که من نمی خوام صفحم اسکرول بخوره
بلکه می خوام وقتی اطلاعات داخل قسمت پایین صفحهم زیاد شد اون قسمت اسکرول بخوره
یادتون باشه که می خوام doctype صفحه هم xhtm ver 1 باشه
اگر doctype صفحه html 4 باشه این کار به راحتی انجام می شه
چون در زمانی که doctype صفحه html 4 هست ، وقتی می گی قسمت بالایی 300 پیکسل و قسمت پایینی 100% باشه اون 100% به معنای بقیه صفحه که باقی مونده (تو هر resolution ی) قرار می ده، ولی و تو xhtml ورژن 1 این 100% رو به معنای کل صفحه قرار می ده
نمونه یک صفحه رو هم براتون می گذارم تا اگه کسی تونست راهنماییم کنه






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, html
{
margin: 0px 0px 0px 0px;
padding: 0px;
border: 0px none;
width: 100%;
height: 100%;
}



.header
{
padding: 5px;
border: 1px solid #074323;
background-color: Yellow;
height: 20%;
width: 100%;
min-height: 150px;
overflow: auto;
}



.content
{
font-size: 25px;
padding: 5px;
border: 1px solid #074323;
height: 80%;
overflow: auto;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
salam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
</div>
<div class="content">
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
jmer30
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
jmer30
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
jmer30
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
j salam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
jmer30
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
jmer30
<br />
as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldkjfa slkjsdfal
jlkdfjlja slkj flksjlkfdslkjas dlkjf sldjasdlkjlk sdjlkasdj lksdalkjsdf lkjdsal
j salam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam
<br />
khobisalam as fasdl kjsadl fkjlsakd jlksja lkjsad lfjasldklkasd lkjdaslk jasldj
</div>
</body>
</html>




اینم فایل نمونه: 71544

alismith
شنبه 04 تیر 1390, 19:32 عصر
سلام

دوست عزیز استایل را به این شکل تغییر بدید مشکل حل میشه

<style type="text/css">
body, html
{
margin: 0px 0px 0px 0px;
padding: 0px;
border: 0px none;
width: 100%;
height: 100%;
overflow: hidden;
}



.header
{
padding: 5px;
border: 1px solid #074323;
background-color: Yellow;
height: 20%;
width: 100%;
min-height: 150px;
overflow: auto;
float: left;
}



.content
{
font-size: 25px;
padding: 5px;
border: 1px solid #074323;
height: 80%;
overflow: scroll;
width: 100%;
float: left;
}
</style>


موفق باشید