页脚菜单位于主容器的顶部
我有三个主要的div，分别是header，main-container和footer。 div的CSS是
#main_container
{
width:950px;
margin:0 auto;
}
#header
{
background:#f4f8f9;
}
#footer
{
clear:both;
background:#355e95;
height:40px;
color:#fff;
font-size:13px;
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
现在，在索引页面中，没有左右浮动，因此页脚位于底部。但在随后的页面中，有很多浮动，现在页脚超过main-container！为什么会这样？我在floating div
footer
<div class="clr"></div>
<div id="footer">
©2010 Sri Sai Group
<div class="fbtm">
Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
</div>
</div>
当我添加overflow:auto;页面时，NB就是这样的！
我的页面之一的完整HTML：
<body>
<div id="header">
<div class="htop">
<div class="phn">Ph +0361-26699811</div>
<div class="email">Email support@7sisters.in</div>
</div>
</div>
<div id="main_container">
<div id="menu_wrapper">
<div class="menu_outer">
<div class="logo">
<img src="css/images/logo.png" alt="Sri sai" />
</div>
<div class="menu">
<div id="site_title">
<h1>SRI SAI GROUP</h1>
</div>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>About</span></a>
<ul>
<li class='has-sub '><a href='#'><span>Overview</span></a>
</li>
<li class='has-sub '><a href='#'><span>Board Members</span></a>
</li>
<li class='has-sub '><a href='#'><span>Our Family</span></a>
</li>
<li class='has-sub '><a href='#'><span>Gratitude</span></a>
</li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Business</span></a>
<ul>
<li class='has-sub '><a href='#'><span>Food and Beverages</span></a>
</li>
<li class='has-sub '><a href='#'><span>Media and Entertaintment</span></a>
</li>
<li class='has-sub '><a href='#'><span>Information Technology</span></a>
</li>
<li class='has-sub '><a href='#'><span>Consumer Servies</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<div id="web-design">
<img src="css/images/banner_ssg.png" />
Our Website Development team builds websites using latest technologies; the sites we build are robust, secure and reliable. Our process guarantees fast capturing of your idea and quick Website Development at minimum possible cost.
During the Website Development process we keep provisions for future growth of your business. The sites we build are SEO compatible. You will get professional developers that are personally dedicated to you and ready to meet your business objectives.
All our projects come with the needed documentation and support.
</div>
<div id="contact_form">
<form method="post" id="customForm" action="">
<div>
<label for="name">Name </label>
<input id="name" name="name" type="text" />
<span id="nameInfo"></span>
</div>
<div>
<label for="email">Phone </label>
<input id="phone" name="phone" type="text" />
<span id="phoneInfo"></span>
</div>
<div>
<label for="message">Address </label>
<textarea id="message" name="message" cols="" rows=""></textarea>
</div>
<div>
<label for="email">Email </label>
<input id="email" name="email" type="text" />
<span id="emailInfo"></span>
</div>
<div>
<label for="pass2">Website </label>
<select>
<option>Static</option>
<option>Dynamic</option>
</select>
<span id="pass2Info"></span>
</div>
<div>
<input id="send" name="send" type="submit" value="Send" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
</div>
<div class="clr"></div>
<div id="footer">
©2010 Sri Sai Group
<div class="fbtm">
Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
</div>
</div>
</body>
3 个答案:
答案 0 :(得分：1)
看起来你需要做的就是在页脚之前关闭你的maincontent div，它缺少一个这样做（如果你认为你已经没有了）。
<div>
<input id="send" name="send" type="submit" value="Send" />
</div>
</form>
</div>
</div></div>
<div class="clr"></div>
<div id="footer">
©2010 Sri Sai Group
<div class="fbtm">
Powered,Maintained and Designed By <a href="http://7sisters.in"
target="_blank">7sisters.in</a>
</div>
另外，也许可以考虑将maincontent width设置为％来阻止它在某些浏览器上扩展太远。
#main_container
{
width:100%;
margin:0 auto;
}
答案 1 :(得分：0)
您应该将overflow:auto添加到#main_container css中，以便根据其子元素的大小增加高度。然后#footer将直接在#main_container之后，这意味着在所有内容之后。
#main_container
{
width:950px;
margin:0 auto;
overflow: auto; /* add this */
}
答案 2 :(得分：0)
把这个结构。
<body>
<div id="header">
<div class="htop">
<div class="phn">Ph +0361-26699811</div>
<div class="email">Email support@7sisters.in</div>
</div>
</div>
<div id="main_container">
<div id="menu_wrapper">
<div class="menu_outer">
<div class="logo">
<img src="css/images/logo.png" alt="Sri sai" />
</div>
<div class="menu">
<div id="site_title">
<h1>SRI SAI GROUP</h1>
</div>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>About</span></a>
<ul>
<li class='has-sub '><a href='#'><span>Overview</span></a>
</li>
<li class='has-sub '><a href='#'><span>Board Members</span></a>
</li>
<li class='has-sub '><a href='#'><span>Our Family</span></a>
</li>
<li class='has-sub '><a href='#'><span>Gratitude</span></a>
</li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Business</span></a>
<ul>
<li class='has-sub '><a href='#'><span>Food and Beverages</span></a>
</li>
<li class='has-sub '><a href='#'><span>Media and Entertaintment</span></a>
</li>
<li class='has-sub '><a href='#'><span>Information Technology</span></a>
</li>
<li class='has-sub '><a href='#'><span>Consumer Servies</span></a>
</li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<div id="web-design">
<img src="css/images/banner_ssg.png" />
Our Website Development team builds websites using latest technologies; the sites we build are robust, secure and reliable. Our process guarantees fast capturing of your idea and quick Website Development at minimum possible cost.
During the Website Development process we keep provisions for future growth of your business. The sites we build are SEO compatible. You will get professional developers that are personally dedicated to you and ready to meet your business objectives.
All our projects come with the needed documentation and support.
</div>
<div id="contact_form">
<form method="post" id="customForm" action="">
<div>
<label for="name">Name </label>
<input id="name" name="name" type="text" />
<span id="nameInfo"></span>
</div>
<div>
<label for="email">Phone </label>
<input id="phone" name="phone" type="text" />
<span id="phoneInfo"></span>
</div>
<div>
<label for="message">Address </label>
<textarea id="message" name="message" cols="" rows=""></textarea>
</div>
<div>
<label for="email">Email </label>
<input id="email" name="email" type="text" />
<span id="emailInfo"></span>
</div>
<div>
<label for="pass2">Website </label>
<select>
<option>Static</option>
<option>Dynamic</option>
</select>
<span id="pass2Info"></span>
</div>
<div>
<input id="send" name="send" type="submit" value="Send" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<div class="clr"></div>
</div>
<div id="footer">
©2010 Sri Sai Group
<div class="fbtm">
Powered,Maintained and Designed By <a href="http://7sisters.in" target="_blank">7sisters.in</a>
</div>
</div>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？