开发者

100% width + horizontal and vertical scrolling

问答 作者：

My site has a width of 100%. My site often contains wide tables, and sometimes these tables gets wider than the 100% (of the viewport).

When that happens, a horizontal scrollbar appears (which is fully natural). But when I scroll horizontally, the menu is not following the width of the widest table.

I have tried various code examples available on the Internet, but none seems to help me all the way. Below is my latest code, and it works with the horizontal scrolling (because of the fixed position of the menu). But, when the page gets "high", and vertical scrolling is needed, the menu is always visible and fixed at its original viewport position (again, natural behaviour).

Is there any way to make the behave like it does now when scrolling horizontally开发者_如何学运维, but acting normally when scrolling vertically?

If anyone has any suggestions, I'd be more than grateful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <style type="text/css">
        .myTable { width: auto; float: left; width: 100%; color: #666; border: 2px solid #666; }
        .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }

        .myMenu { text-align: center; background: #666666; float: left; width: 100%; height: 30px; margin-bottom: 20px; color: #fff; }
        .myMenu ul { margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; width: 300px; list-style-type: none; text-align: center; }
        .myMenu ul li { float: left; padding: 5px 20px 5px 20px; }

                body                            { margin:0; padding:50px 0 0 0; }
                div#header                      { top:0; left:0; width:100%; height:50px; position: fixed; }
                * html body                     { overflow:hidden; } 
                * html div#content      { height:100%; overflow:auto; }

    </style>
</head>
<body>
        <div id="header">
                <div class="myMenu">
                        <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                        </ul>
                </div>
        </div>
        <div id="content">
                <table class="myTable">
                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                                        <tr>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                                <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
                        </tr>
                </table>
        </div>
</body>
</html>

EDIT: I managed to get it to work in IE8, but IE7 still suffers from the same disease :(

What made it work in IE8 was actually changing width: 100%; into min-width: 100%;, but IE7 doesn't seem to agree.

Anyone?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <style type="text/css">  
        body { margin: 0px; padding: 0px; }
        #container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
        #myMenu { width: auto; min-width: 100%; background: #666; float: left; margin-bottom: 15px; }
        #myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; }
        #myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; }

        .myTable { width: auto; float: left; color: #666; border: 2px solid #666; }
        .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
        #filter { margin-bottom: 10px; border: 1px solid red; height: 50px; min-width: 100%; float: left; }

    </style>
</head>
<body id="myBody">
<div id="container">
    <div class="myMenu" id="myMenu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div id="filter">
some content
    </div>
            <table class="myTable potential">
        <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
    </table>
    <table class="myTable potential" id="myTable">
        <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>


<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</

td>
        </tr>
    </table>

    </div>
</body>
</html>

Answer to my own question:

After hours and days of trying, I finally made it work in both IE7/IE8, which was the goal. The only limitation goes for IE7, where the menu is not centered when the table is too wide.

The solution was to use min-width instead of width, which lets the content grow outside of the viewport but still covering the whole screen if the content is less wide than the viewport.

I will post the code here, if anyone else in the future is facing the same terrible issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <style type="text/css">  
        body { margin: 0px; padding: 0px; min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left;  }
        #container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
        #myMenu { background: #666; float: left; min-width: 100%; }
        #myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; }
        #myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; }

        .myTable { width: auto; float: left; color: #666; border: 2px solid #666; }
        .myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
        #filter { background: yellow; }

html>body #myMenu { *min-width: auto; background: #666; *float: none; margin-bottom: 15px; }


    </style>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body id="myBody">
<div id="container">
    <div class="myMenu" id="myMenu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div id="filter">
some content
    </div>
            <table class="myTable potential">
        <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
    </table>
    <table class="myTable potential" id="myTable">
        <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
                <tr>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
            <td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
        </tr>
    </table>

    </div>
</body>
</html>

Thanks for the support!

The best I could come up with after playing was setting the same explicit width on both the body and the div.myMenu (e.g. 1800px or 150em). To do this, however, you would need to know both which pages had the wide tables and approximately how wide to make them. Problematic I expect.

继续阅读：csshtml-tablepositionwidth

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9