CSS tabs overlapping_问答_开发者_运维开发者技术经验分享

the following HTML code has a sample used from example 6 given on http://css-tricks.com/examples/CSSTabs/

<head>
    <style type="text/css">
        .tabview { min-height: 250px; position: relative; width: 100%; }
        .tabview > div { display: inline; }
        .tabview > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
        .tabview > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
        .tabview > div:target > a { background: white; }    
        .tabview > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
        .tabview > div:not(:target) > div { position: absolute }
        .tabview > div:target > div { position: absolute; z-index: -1; }
    </style>
</head>
<body>
    <div class="tabview">
        <div id="tab1">
            <a href="#tab1">Tab 1</a>
            <div>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipis开发者_运维问答icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div id="tab2">
            <a href="#tab2">Tab 2</a>
            <div>2. One might well argue, that...</div>
        </div>
        <div id="tab3">
            <a href="#tab3">Tab 3</a>
            <div>3. One might well argue, that...</div>
        </div>
    </div>
</body>

The problem is, when there's lot of text in any tab, it's end part is not hidden when you switch to another tab.

For example, in the code given above - the end contents of Tab1 can be seen even when you switch to other tabs.

In another worse case, if more tabs have lot of text - then the contents overlap.

How can this be solved?

One way to solve this is to increase min-height in the tabview class. But in my application the tab contents are generated in real-time (from some web service), and I don't have idea about their size.

Note: The code works only in non-IE browser

Just add

.tabview > div > div
{
overflow: auto;
}

Solves both the problems. The end text is no longer visible and even with a lot of content, it does not overlap.

Fiddle

If you're using this on an actual website, you definitely don't want to use this pure CSS solution. Beyond the fact that it won't work properly in IE, the fact that your page moves when you switch tabs is really going to be a turnoff to your visitors.

If you were to try and make this work in IE, you'd have to rely on a Javascript solution. If you're already relying on a Javascript solution to fix the tabs, you might as well use javascript to power your tabs.

Please, check out jQuery UI Tabs. A much, much better solution.