Div 高度不会根据子控件自动扩展
Div Height is not automatically extended based on child control
我创建了网页
http://jsfiddle.net/KNfrm/embedded/result/
Middiv 未扩展到左窗格和右窗格的高度。
Middiv 具有黑色背景颜色
您需要
在.rightpane
后清除浮点数,浮点元素将从正常的html流中删除。只需在.rightpane
后添加一个空块元素,即可clear:both
http://jsfiddle.net/KNfrm/1/- http://jsfiddle.net/KNfrm/1/show
demo
法典:
<!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>Tile Mode</title>
<style>
body {
margin: auto;
background-color:#fff;
font-family:arial, verdana, helvetica;
font-size:12px;
color:#222;
}
.center{
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.frameDiv {
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.header {
width:auto;
height:150px;
background-color:transparent;
}
.logo {
height:100px;/*background-image:url(./images/header.png);*/
}
.menu {
height:50px;
width:auto;
background-color:#ccc;
}
.menus {
list-style-type: none;
list-style-position:outside;
position: relative;
margin: 0;
padding: 0;
}
.menus li {
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 200px;
height: 50px;
margin-right: 0px;
background-image:url(./images/menu.png);
background-repeat:no-repeat;
}
.menus a {
display:block;
height:50px;
text-indent:-9999px;
outline:none;
}
#menu1 {
background-position:0px 0px;
}
#menu2 {
background-position:-200px 0px;
}
#menu3 {
background-position:-400px 0px;
}
#menu4 {
background-position:-600px 0px;
}
#menu5 {
background-position:-800px 0px;
}
#menu1.active, #menu1:hover {
background-position: 0 bottom;
}
#menu2.active, #menu2:hover {
background-position: -200px bottom;
}
#menu3.active, #menu3:hover {
background-position: -400px bottom;
}
#menu4.active, #menu4:hover {
background-position: -600px bottom;
}
#menu5.active, #menu5:hover {
background-position: -800px bottom;
}
.leftpane {
float:left;
width:750px;
height:auto;
display:block;
background-color:transparent;
}
.rightpane {
float:right;
width:250px;
height:auto;
background-color:transparent;
}
.content {
width:auto;
background-color:transparent;
display:block;
border-color:#666;
border-style:solid;
border-width:5px;
}
.footer {
margin:0px;
width:auto;
height:100px;
background-color:#461015;
display:block;
text-align:center;
overflow:hidden;
}
.footer p {
display:inline;
}
.footer p a:link {
color: #fff;
text-decoration:none;
}
.footer p a:visited {
color: #fff;
text-decoration:none;
}
.footer p a:hover {
color: #fff;
text-decoration:none;
}
.footer p a:active {
color: #fff;
text-decoration:none;
}
.quote {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
}
.facebook {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/facebook.png);
background-repeat:no-repeat;
}
.linkedin {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/linkedin.png);
background-repeat:no-repeat;
}
.twitter {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/twitter.png);
background-repeat:no-repeat;
}
.hl {
border: 2px;
width: 80%;
border-color:#999;
}
ul#ticker {
width: 200px;
height: 200px;
overflow: hidden;
margin:auto;
list-style-type:none;
padding:0px;
font-family:Calibri, Arial, Tahoma;
font-style:normal;
}
ul#ticker li {
margin:0px;
padding:0px;
width: 200px;
height: 130px;
white-space:normal;
overflow:none;
text-align:justify;
}
ul#ticker li a:link {
color: #fff;
text-decoration:none;
}
ul#ticker li a:visited {
color: #fff;
text-decoration:none;
}
ul#ticker li a:hover {
color: #fff;
text-decoration:none;
}
ul#ticker li a:active {
color: #fff;
text-decoration:none;
}
ul#ticker li span {
display: block;
color: #06C;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
</script>
<script type="text/javascript">
$(function()
{
var ticker = function()
{
setTimeout(function(){
$('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
{
$(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
</script>
<body>
<div class="center">
<div class="frameDiv">
<div class="header">
<div class="logo"> </div>
<div class="menu">
<ul class="menus">
<li id="menu1"><a href="index.php">Home</a></li>
<li id="menu2"><a href="aboutus.php">About us</a></li>
<li id="menu3"><a href="services.php">Services</a></li>
<li id="menu4"><a href="gallery.php">Gallery</a></li>
<li id="menu5"><a href="contactus.php">Contact</a></li>
</ul>
</div>
</div>
<div class="mid">
<div class="leftpane">
<div class="image" style="margin:5px; margin-right:0px; display:block;">
<img src="http://www.grnyrenovation.com/images/nycpremier.jpg"; style="overflow:hidden; width:745px" />
</div>
<div class="content"></div>
<div class="footer"> <br/>
<hr style="height:2px; border:1px;" noshade="noshade"/>
<p><a href="index.php">Home |</a></p>
<p><a href="aboutus.php">About us |</a></p>
<p><a href="services.php">Services |</a></p>
<p><a href="gallery.php">Gallery |</a></p>
<p><a href="contactus.php">Contact</a></p>
<hr style="height:2px; border:1px; width:70%" noshade="noshade"/>
<p style="margin:8px">© Tile</p>
</div>
</div>
<div class="rightpane">
<div style="clear:both;">
<div class="quote"> </div>
<div class="facebook"> </div>
<div class="linkedin"> </div>
<div class="twitter"> </div>
<hr/ class="hl" style="height:2px; border:1px;" noshade="noshade">
<div class="testimonial">
<div style="color:#FFF; font-weight:bold; font-size:large; font-family:'MS Serif', 'New York', serif; text-align:center;">
<h3>Testimonials</h3>
</div>
<div class="tickerclass">
<ul id="ticker">
<li> <span>Title 1</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the. </a> </li>
<li> <span>Title 2</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
<li> <span>Title 3</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
<li> <span>Title 4</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
<li> <span>Title 5</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
</ul>
</div>
</div>
<br/>
<hr class="hl" style="height:2px; border:1px;" noshade="noshade"/>
<div class="acceridation" style="text-align:center; height:60px;">
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/nkba_170x90.jpg" />
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/sm_EPA-Lead-Safe-Certified.png"/>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
</body>
</html>
尝试这样做将您的代码添加到中心div
.center{ overflow:auto;}
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何将javascript事件从web浏览器wpf控件发送到wpf的c#代码
- 如何更改文本框控件的不透明度值
- 所有控件的组合框
- 创建一个方法,通过一个窗口进行迭代并获取Titanium中的所有控件
- 在angularjs中创建自定义控件的推荐方法
- 如何使用ngModel将自定义控件的提供程序扩展器分离到Angular 2中的单独文件中
- Div 高度不会根据子控件自动扩展
- asp.net ajaxtoolkit 自定义控件扩展器
- 可编辑的、扩展的引导输入列表控件
- 传单:使用分组图层控件插件扩展自定义控件
- 使用弹出控件扩展程序Asp.net在更新面板内维护滚动位置复选框列表
- 如何启用拖动控件以滚动和扩展所选内容
- 如何管理Ajax扩展器控件的javascript依赖
- 有没有办法在火狐扩展中对控件进行分组?
- SAPUI5 如何通过扩展现有控件创建自定义控件
- 扩展SAPUI5中的控件