4

2 つのスクロール可能な列 (ブートストラップ 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 に答える