Home/ Questions/Q 8795073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:20:17+00:00

I try to make a layout with two scrollable columns (with bootstrap 2.2). Now

  • 0

I try to make a layout with two scrollable columns (with bootstrap 2.2). Now it seems to be working if i remove the “!doctype html” tag so i assume something with my layout is not according to the specification. Can somebody tell me what i did wrong or how i could easier find my error?

<!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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • correct the many, many </br> </br > etc tags
    • <html xmlns="http://www.w3.org/1999/html"> should be <html xmlns="http://www.w3.org/1999/xhtml">
    • add a <title>
    • remove the stray </div> at the bottom

    Now you have a html5 doc that validates. To get the scrollables to work, you must give either body or .scrollable a height. You cannot have a scrollable defined as 100% of 100%.

    if you set 

     .scrollable {
            height: 500px;
            overflow: auto;
        }

    it works, OR – set the height dynamically in javascript :

    <script type="text/javascript">
$(document).ready(function() {
    var h=$(window).height();
    $('.scrollable').height(h+'px');
});
</script>

    note : the code just simulates the 100%->100%, top of the scrollables is still behind the navbar, and you must implement some code to take care of window resizing.

    cleaned markup :

     <!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>
    • 0