<!DOCTYPE HTML> <!-- scrolling only works without the DOCTYPE --><HTML xmlns="http://www.w3.org/1999/HTML"><head> <link rel="stylesheet" media="screen" href="bootstrap.min.CSS"> <script src="jquery-1.7.1.min.Js" type="text/JavaScript"></script> <script src="bootstrap.min.Js" type="text/JavaScript"></script> <style type="text/CSS"> body,HTML { height: 100%; overflow: hIDden; } .navbar-inner { height: 40px; } .scrollable { height: 100%; overflow: auto; } .max-height { height: 100%; } .no-overflow { overflow: hIDden; } .pad40-top { padding-top: 40px; } </style></head><body><div > <div > <div > <div > <a href="#">Title</a> <ul ID="myTab" > <li><a href="#serials" data-toggle="tab">Serials</a></li> <li><a href="#parameters" data-toggle="tab">Parameter</a></li> <li ><a href="#log" data-toggle="tab">Log</a></li> </ul> </div> </div> </div></div><div > <div > <div > <div ID="log"> <div > <div > First menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br >menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu </br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>main </div> </div> <div > <div > First Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br> Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br >Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</ br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content< /br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content </br>Content</br>Content</br> </div> </div> </div> </div> </div> </div></div></body>解决方法 >纠正许多,很多< / br> < / br>等标签
>< HTML xmlns =“http://www.w3.org/1999/HTML”>应该是< HTML xmlns =“http://www.w3.org/1999/xhtml”>
>添加< Title>
>删除迷路< / div>在底部
现在你有一个验证的HTML5文档.要使滚动条起作用,必须为body或.scrollable指定一个高度.您不能将滚动定义为100%的100%.
如果你设置
.scrollable { height: 500px; overflow: auto; }
它可以工作,或者 – 在JavaScript中动态设置高度:
<script type="text/JavaScript">$(document).ready(function() { var h=$(window).height(); $('.scrollable').height(h+'px');});</script>
注意:代码只是模拟100% – > 100%,滚动条的顶部仍然在导航栏后面,你必须实现一些代码来处理窗口大小调整.
清理标记:
<!DOCTYPE HTML> <HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <Title>test</Title> <script src="http://code.jquery.com/jquery-latest.Js"></script> <script src="Js/bootstrap.min.Js"></script> <link href="CSS/bootstrap.min.CSS" rel="stylesheet"> <style type="text/CSS"> body,HTML { height: 100%; overflow: hIDden; } .navbar-inner { height: 40px; } .scrollable { height: 500px; overflow: auto; } .max-height { height: 100%; } .no-overflow { overflow: hIDden; } .pad40-top { padding-top: 40px; } </style> <!-- or : <script type="text/JavaScript"> $(document).ready(function() { var h=$(window).height(); $('.scrollable').height(h+'px'); }); </script> --> </head> <body> <div > <div > <div > <div > <a href="#">Title</a> <ul ID="myTab" > <li><a href="#serials" data-toggle="tab">Serials</a></li> <li><a href="#parameters" data-toggle="tab">Parameter</a></li> <li ><a href="#log" data-toggle="tab">Log</a></li> </ul> </div> </div> </div> </div> <div > <div > <div > <div ID="log"> <div > <div > First menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu <br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>main </div> </div> <div > <div > First Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content <br>Content<br>Content<br> </div> </div> </div> </div> </div> </div> </body>总结
以上是内存溢出为你收集整理的html – 带有引导程序的两个可滚动列全部内容,希望文章能够帮你解决html – 带有引导程序的两个可滚动列所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)