4

我尝试使用两个可滚动列（使用引导程序 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 class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse collapse">
                <a class="brand" href="#">Title</a>
                <ul id="myTab" class="nav nav-tabs">
                    <li><a href="#serials" data-toggle="tab">Serials</a></li>
                    <li><a href="#parameters" data-toggle="tab">Parameter</a></li>
                    <li class="active"><a href="#log" data-toggle="tab">Log</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="container max-height no-overflow">
    <div class="row max-height">

        <div class="tabbable tabs-left">

                 <div class="tab-pane active" id="log">

                    <div class="span2 scrollable">
                        <div class="pad40-top">
                            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 class="span10 scrollable">
                        <div class="pad40-top">
                            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>

截屏

4

1 回答 1

5
  • 更正许多许多</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 class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <div class="nav-collapse collapse">
                    <a class="brand" href="#">Title</a>
                    <ul id="myTab" class="nav nav-tabs">
                        <li><a href="#serials" data-toggle="tab">Serials</a></li>
                        <li><a href="#parameters" data-toggle="tab">Parameter</a></li>
                        <li class="active"><a href="#log" data-toggle="tab">Log</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container max-height no-overflow">
        <div class="row max-height">

            <div class="tabbable tabs-left">

                     <div class="tab-pane active" id="log">

                        <div class="span2 scrollable">
                            <div class="pad40-top">
                                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 class="span10 scrollable">
                            <div class="pad40-top">
                                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>
于 2012-11-06T12:48:18.893 回答