Headstrong div dnt希望留在原地 [英] headstrong div dnt want stay on its place
问题描述
大家好....
我在设计时遇到问题...
我有三个div，如下所示:
hey guys ....
i have a problem in my designing ...
i have three div as below:
<div class="Header">
...
</div>
<div class="Body">
...
</div>
<div class="Footer">
...
</div>
我为每个div自动"设置高度，因为我希望通过其内容来设置高度...
好我的标题div和我的body div也能正常工作，但我的页脚div仍停留在顶部，它认为它是标题:S我有一个解决方案，可以将标题div和body div的height属性设置为"500px"这样的数字'...但是不好，也许我的内容需要超过500高度...所以，如果身体变高，我的页脚会下降，我该怎么做才能保持页脚底部div:s
检查我的代码:
i set height for every div ''auto'' becaus i want their height set by their content ...
well my header div and my body div work as well but my footer div stick on top , it think it is a header :S i have a solution to splve that set height property for header div and body div as digit like ''500px'' ... but its not good maybe my content need more than 500 height ... so what should i do for keep footer bottom of body div if body get taller my footer go downer :s
check my codes:
<body önload='PageLoad()'>
<div class="HeaderContainer">
<div class="SiteLogo">
<asp:Image ID="imgSiteLogo" runat="server" ImageUrl="~/Images/logo.png"/>
</div>
<div class="HeaderContent" dir="rtl">
<div class="TopAd">
<center>ADVERTISE PLACE</center>
</div>
<div class="SiteDiscription">
<span>سایت چت فارسی گپر</span>
</div>
</div>
</div>
<div class="BodyContainer">
<div id="VerticalMenuLeft" class="MenuBar" dir="rtl" style="height:auto;">
<div class="LeftMenubarItem"><a id="OrderSoftware" href="" title="سفارش هر نوع نرم افزار با قیمت مناسب و کیفیت بالا" target="_blank">سفارش نرم افزار</a></div><br />
<div class="LeftMenubarItem"><a id="OrderWebsite" href="" title="سفارش وب سایت با سرعت بالا، پشتیبانی، طراحی زیبا، کیفیت بالا و قیمت مناسب" target="_blank">سفارش وب سایت</a></div><br />
</div>
<div id="BodyMainContent" class="BodyMainContent">
<asp:ContentPlaceHolder ID="MainContents" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
<div class="FooterContainer">
<div style="background-color:Olive;float:left;width:200px;height:200px;">
</div>
<div style="background-color: Lime;float:right;width:80%;height:200px;">
</div>
</div>
</body>
这是我的CSS:
and this is my css:
/******************** Tags ********************/
body
{
width:100%;
height:auto;
background-color:Yellow;
margin: 0px;
}
/******************** Header ********************/
.HeaderContainer
{
width:100%;
height:auto;
}
.SiteLogo
{
width:13%;
height:200px;
float:left;
}
.HeaderContent
{
width:85%;
height:200px;
background-color:Red;
float:right;
}
.TopAd
{
width:100%;
height:70px;
background-color:White;
}
.SiteDiscription
{
font-family:2 Compset;
text-align:center;
}
/******************** Body ********************/
.BodyContainer
{
width:100%;
height:auto;
}
.MenuBar
{
width:13%;
background-color:green;
float:left;
}
.MenuBar .LeftMenubarItem
{
width: 100%;
height: 50px;
background-image: url('../Images/LeftMenu/Item1.png');
background-position: center center;
background-repeat:no-repeat;
color:White;
text-align:center;
text-decoration:none;
vertical-align:text-bottom;
padding-top:10%;
}
.BodyMainContent
{
width:85%;
height:500;
background-color:Blue;
float:right;
}
/******************** Footer ********************/
.FooterContainer
{
width:100%;
height:auto;
background-color:Gray;
}
推荐答案
尝试在正文之后添加一个clear属性.即
Try adding a clear attribute after the body. i.e.
<div id="body">
content and stuff here.....
<div style="clear:both">
</div>
</div>
<div id="footer">footer stuff</div>
这篇关于Headstrong div dnt希望留在原地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
