100% ширина + горизонтальная и вертикальная прокрутка - PullRequest
Новая
       23

100% ширина + горизонтальная и вертикальная прокрутка

1 голос
/ 26 ноября 2010

Мой сайт имеет ширину 100%. Мой сайт часто содержит широкие таблицы, и иногда эти таблицы становятся шире, чем 100% (в области просмотра).

Когда это происходит, появляется горизонтальная полоса прокрутки (что вполне естественно). Но когда я прокручиваю по горизонтали, меню не соответствует ширине самой широкой таблицы.

Я пробовал различные примеры кода, доступные в Интернете, но ни один из них, похоже, не помог мне полностью. Ниже мой последний код, и он работает с горизонтальной прокруткой (из-за фиксированного положения меню). Но когда страница становится «высокой» и требуется вертикальная прокрутка, меню всегда отображается и фиксируется в исходном положении окна просмотра (опять же, естественное поведение).

Есть ли способ заставить себя вести себя так, как сейчас, при горизонтальной прокрутке, но действовать нормально при вертикальной прокрутке?

Если у кого-нибудь есть предложения, я буду более чем благодарен. 

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

РЕДАКТИРОВАТЬ : мне удалось заставить его работать в IE8, но IE7 все еще страдает от той же болезни :(

То, что заставляло его работать в IE8, фактически меняло ширину: 100%; в min-width: 100% ;, но IE7, похоже, не согласен.

Любой 

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

Ответы [ 2 ]

2 голосов
/ 02 декабря 2010

Ответ на мой собственный вопрос:

После нескольких часов и дней попыток я, наконец, заставил его работать в IE7 / IE8, что и было целью.Единственное ограничение относится к IE7, где меню не центрируется, когда таблица слишком широка.

Решением было использование минимальной ширины вместо ширины, которая позволяет контенту расти вне области просмотра, но все еще покрываетвесь экран, если содержимое менее широко, чем область просмотра.

Я опубликую код здесь, если кто-то еще в будущем столкнется с той же ужасной проблемой: 

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

Спасибо за поддержку!

0 голосов
/ 26 ноября 2010

Лучшее, что я мог придумать после игры, это установить одинаковую ширину как для тела, так и для div.myMenu (например, 1800px или 150em).Однако, чтобы сделать это, вам нужно знать, какие страницы имеют широкие таблицы и какова их ширина.Проблематично я ожидаю.

...