html – 带有引导程序的两个可滚动列_html-js-css

概述我尝试使用两个可滚动列(使用bootstrap 2.2)进行布局.现在它似乎工作,如果我删除“！doctype html”标签,所以我假设我的布局不符合规范.有人可以告诉我我做错了什么或如何更容易找到我的错误？ <!doctype html> <html xmlns="http://www.w3.o 我尝试使用两个可滚动列(使用bootstrap 2.2)进行布局.现在它似乎工作,如果我删除“！DOCTYPE HTML”标签,所以我假设我的布局不符合规范.有人可以告诉我我做错了什么或如何更容易找到我的错误？

<!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 – 带有引导程序的两个可滚动列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1064299.html

html – 带有引导程序的两个可滚动列

发表评论

评论列表（0条）