Home >Web Front-end >HTML Tutorial >min-height is not compatible with _html/css_WEB-ITnose
min-height is not compatible with _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:53876browse
<!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=gb2312" /><title>基于 JQuery 制作的树形下拉菜单-LIEHUO.NET</title><script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.js"></script><script type="text/javascript"> $(document).ready( function() { $(".menuTitle").click(function(){ $(this).next("div").slideToggle("slow") .siblings(".menuContent:visible").slideUp("slow"); $(this).toggleClass("activeTitle"); $(this).siblings(".activeTitle").removeClass("activeTitle"); }); }); </script><style type="text/css">body{margin:0;;background-color:#fff;}.container{width:200px; text-align:center; padding:10px;}.menuTitle{width:148px; height:25px; background-color:#6CF; margin:0 auto; line-height:25px; font-size:14px; font-weight:bold;color:#fff; cursor:pointer; margin-top:20px; border:#909 solid 1px;}.activeTitle{width:148px; height:25px;background-color:#6CF; margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#F00; cursor:pointer; margin-top:20px;border:#909 solid 1px;}.menuContent{background-color:#0CF; margin:0 auto; min-height:350px; height:100%;_height:350px; width:148px; text-align:left; display:none;}li{list-style-type:none;padding:0px 0px 0px 38px; font-size:12px; height:30px; line-height:24px;}a:link {color: #fff; text-decoration:none;} /* 未访问的链接 */a:visited {color: #fff;text-decoration:none;} /* 已访问的链接 */a:hover {color: #000} /* 当有鼠标悬停在链接上 */ul{margin:0;padding:0;}</style></head><body leftmargin="0" topmargin="0"><div class="container"><div class="menuTitle">学校介绍</div><div class="menuContent"><ul><li> <a href="http://www.veryhuo.com/news/" _fcksavedurl="http://www.veryhuo.com/news/" target="_blank">教育理念</a></li><li> <a href="http://www.veryhuo.com/website/" _fcksavedurl="http://www.veryhuo.com/website/" target="_blank">教职员介绍</a></li><li> <a href="http://www.veryhuo.com/design/" _fcksavedurl="http://www.veryhuo.com/design/" target="_blank">学校特色1</a></li><li> <a href="http://www.veryhuo.com/website/" _fcksavedurl="http://www.veryhuo.com/website/" target="_blank">学校特色2</a></li><li> <a href="http://www.veryhuo.com/design/" _fcksavedurl="http://www.veryhuo.com/design/" target="_blank">周边环境</a></li><li> <a href="http://www.veryhuo.com/design/" _fcksavedurl="http://www.veryhuo.com/design/" target="_blank">设施 设备</a></li></ul></div><div class="menuTitle">入学指南</div><div class="menuContent"><ul><li> <a href="http://tool.liehuo.net/baidu_google.php" _fcksavedurl="http://tool.liehuo.net/baidu_google.php" target="_blank">入学考试信息</a></li><li> <a href="http://tool.liehuo.net/shoulu/" _fcksavedurl="http://tool.liehuo.net/shoulu/" target="_blank">入学流程</a></li><li> <a href="http://tool.liehuo.net/pr/" _fcksavedurl="http://tool.liehuo.net/pr/" target="_blank">申请材料</a></li><li> <a href="http://tool.liehuo.net/shoulu/" _fcksavedurl="http://tool.liehuo.net/shoulu/" target="_blank">入学金以及学费</a></li><li> <a href="http://tool.liehuo.net/pr/" _fcksavedurl="http://tool.liehuo.net/pr/" target="_blank">?学金</a></li></ul></div><div class="menuTitle">课程设置</div><div class="menuContent"><ul><li> <a href="http://forum.liehuo.net/forum-2-1.html" _fcksavedurl="http://forum.liehuo.net/forum-2-1.html" target="_blank">课程安排</a></li><li> <a href="http://forum.liehuo.net/forum-35-1.html" _fcksavedurl="http://forum.liehuo.net/forum-35-1.html" target="_blank">学习内容</a></li><li> <a href="http://forum.liehuo.net/forum-12-1.html" _fcksavedurl="http://forum.liehuo.net/forum-12-1.html" target="_blank">校外学习&年内活动</a></li></ul></div><div class="menuTitle">提问&地图</div><div class="menuContent"><ul><li> <a href="http://forum.liehuo.net/forum-2-1.html" _fcksavedurl="http://forum.liehuo.net/forum-2-1.html" target="_blank">提问</a></li><li> <a href="http://forum.liehuo.net/forum-35-1.html" _fcksavedurl="http://forum.liehuo.net/forum-35-1.html" target="_blank">交通</a></li></ul></div><div class="menuTitle">Q&A</div><div class="menuContent"><ul></ul></div></div></body> There is no problem with this effect without adding a minimum height
But.menuContent
{
background-color:#0CF; margin:0 auto; min-height:350px; height:100%;_height:350px; width:148px; text-align:left; display:none;
}
After adding the minimum height, the click effect is not smooth. How to solve it if it is paused and then executed? ? ie no problem Firefox 360 does not work
Reply to discussion (solution)
Add an overflow: visible; try
Add an overflow :visible; Try
What effect do you want to achieve
http://www.zzarea.com/css/csshk/css-2271.html
http://121.12.149.109 :4321/test6.html
After some research, it turns out that you cannot simply use min-height, otherwise the action will be unnatural. You can use jquery to traverse the height of the pop-up layer. If the height is less than a certain value, just The height of this pop-up layer is set to a certain height. In the example I made, it was set to a minimum height of 300px in js
In addition, I have to admire the courage of the person upstairs to add overflow: visible. I am really impressed. . . Ha
http://121.12.149.109:4321/test6.html
After some research, it is true that min-height cannot be simply used, otherwise the action will be unnatural. You can use jquery to traverse The height of the pop-up layer. If the height is less than a certain value, set the height of the pop-up layer to a certain height. In the example I made, it was set to a minimum height of 300px in js
Thank you very much, but
You can't do this! ! ! When the content is higher than 300, the frame will not be automatically extended! ! IE8 is not compatible with Firefox
I tested it and it can be automatically extended. I also tested it on Firefox and it was OK. As for IE8, it is not installed on the computer, but it should be OK.
The first sub-column of the column in the source file below is automatically extended,
<!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>无标题文档</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><style>body{margin:0px; padding:0px; font:12px/24px Arial, Helvetica, sans-serif; color:#333; background:#FFF;}ul,li,h1,h2,h3,h4,h5{margin:0px; padding:0px; list-style:none; font-weight:normal; line-height:24px; font-size:12px;}a,a:hover{color:#333; text-decoration:none;}.leftMenu{width:150px; float:left; display:inline; margin:20px;}.leftMenu ul,.leftMenu li{width:150px; float:left; display:inline;}.leftMenu li{margin:0px 0px 20px 0px;}.leftMenu li h1{width:148px; border:1px solid #990099; float:left; display:inline; text-align:center; color:#FFF; font-size:14px; font-weight:bold; background:#66CCFF; cursor:pointer;}.leftMenu li h1.selected{background:#66CCFF; color:#F00;}.leftMenu li h2{background:#00CCFF; width:150px; float:left; display:inline; padding:10px 0px; display:none;}.leftMenu li.selected h2{display:block;}.leftMenu li h2 a,.leftMenu li h2 a:hover{display:block; color:#FFF; text-align:center; padding:3px 0px;}.leftMenu li h2 a:hover{color:#000;}</style><script type="text/javascript">$(function(){ $leftMenuLiH1 = $(".leftMenu>ul>li>h1"); $leftMenuLiH2 = $(".leftMenu>ul>li>h2"); $leftMenuLiH2.each(function(){ if($(this).height() < 300){ $(this).height(300); } }) $leftMenuLiH1.click(function() { if($(this).next().is(":visible")){ $(this).next().slideUp("fast").end().removeClass("selected").parent().siblings().find("h1").removeClass("selected").next().slideUp("fast"); }else{ $(this).next().slideDown("fast").end().addClass("selected").parent().siblings().find("h1").removeClass("selected").next().slideUp("fast"); } })})</script></head><body><div class="leftMenu"><ul><li><h1>学校介绍</h1><h2><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a><a href="#">教育理念</a><a href="#">教职员介绍</a><a href="#">学校特色</a><a href="#">周边环境</a></h2></li><li><h1>入学指南</h1><h2><a href="#">入学考试信息</a><a href="#">入学流程</a><a href="#">申请材料</a><a href="#">入学金以及学费</a><a href="#">?学金</a></h2></li><li><h1>课程设置</h1><h2><a href="#">课程安排</a><a href="#">学习内容</a><a href="#">校外学习 & 年内活动</a></h2></li><li><h1>提问 & 地图</h1><h2><a href="#">提问</a><a href="#">交通</a></h2></li><li><h1>Q & A</h1><h2></h2></li></ul></div></body></html> Thank you very much upstairs, the problem is solved,
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Please solve: onsubmit_html/css_WEB-ITnose of form in jspNext article：Please solve: onsubmit_html/css_WEB-ITnose of form in jsp