Dos columnas desplegables con guía

He tenido este problema muchas veces.

intenté hacer el diseño con dos columnas desplegables (usando bootstrap 2.2). Ahora, si elijo la etiqueta '! Doctype html', parece funcionar correctamente, así que asumo que mi diseño no cumple con las especificaciones. ¿Quién puede decirme qué he hecho mal, o cómo puedo encontrar mis errores más fácilmente?
<!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>    
Screenshot

La mejor manera de resolver el problema

  • correction many </br> </br > Equal Markers
  • <html xmlns="http://www.w3.org/1999/html"> debe ser <html xmlns="http://www.w3.org/1999/xhtml">
  • Add <title>
  • eliminación del Fondo
  • espurio </div>Ahora tiene un documento HTML5 validado. Para que la barra de desplazamiento funcione correctamente, debe especificar una altura para body o .scrollable. No se puede definir una barra de desplazamiento como 100% 100%.
    Si establece
     .scrollable {
                height: 500px;
                overflow: auto;
            }
    
    Puede funcionar, o - establecer la altura dinámicamente en javascript:
    <script type="text/javascript">
    $(document).ready(function() {
        var h=$(window).height();
        $('.scrollable').height(h+'px');
    });
    </script>
    
    Nota: el Código sólo simula 100% -> 100%, la parte superior de la barra de desplazamiento todavía está detrás de la barra de navegación, y usted debe implementar algún código para cambiar el tamaño de la ventana.
    Borrar etiquetas:
     <!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>