Отображение полосы прокрутки div overflow-x без установки ширины div? - PullRequest
4 голосов
/ 31 августа 2011
#main {
margin: auto;
padding: 0;
width: 95%;
}
#left-wrapper {
display: block;
}
#content {
height: 500px;
white-space: nowrap;
overflow-y: auto;
overflow-x: scroll;
}

<div id="main">
    <table>
        <tr>
            <td>
                <div id='left-wrapper'>
                </div>
            </td>
            <td>
                <div id='content'>
                    <table>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

Оболочка содержимого содержит таблицу, в которой хранятся некоторые данные, размер которых неизвестен, и их нельзя переносить так, чтобы было пустое пространство: задан nowrap, и он работает нормально.Высота содержимого div имеет фиксированный размер, и вертикальная полоса прокрутки выглядит нормально.Ширина основного div установлена ​​на 95%.Проблема состоит в том, что div содержимого не активирует полосу прокрутки, когда данные слишком длинные, чтобы уместиться, вместо этого он изменяет размеры к правой стороне экрана, даже если ширина основного div обертки установлена ​​на 95%.Есть ли способ активировать горизонтальную полосу прокрутки содержимого div без установки его ширины?Его максимальная ширина должна соответствовать ширине основной обертки, это не будет проблемой, даже если она имеет фиксированную ширину, но тогда она должна заполнить оставшуюся область, чтобы соответствовать ее основному div обертки, который, как я уже говорилимеет ширину 95%.Я искал везде, дни проходят, и я просто не могу найти правильное решение.Пожалуйста, если у кого-то есть предложение, я буду очень признателен.Благодаря.

1 Ответ

4 голосов
/ 01 сентября 2011

Внутренний <div> останется внутри контейнера <div> с CSS, который у вас есть.Но, поскольку у вас есть <table>, окружающий внутренний <div>, он не ведет себя должным образом.

Я думаю, что решение может заключаться в макете страницы без <table>.

* 1009.* В этом примере показано, как внутреннее <div> ограничено внутри внешнего <div> с использованием вашего текущего CSS.
<html>
<head>
    <style>
    #main {border:solid 2px orange; margin: auto;   padding: 0; width: 190px;}
    #left-wrapper {display: block;}
    #content {border:solid 2px purple;  height: 500px; white-space: nowrap; overflow-y: auto;   overflow-x: scroll;}
    </style>
</head>
<body>
    <div id="main">

      <div id='content'>
         <table style="border:solid 1px #ddd;">
            <tr style="background-color:#ccccff;">
               <td>column A</td>
               <td>column B</td>
               <td>column C</td>
               <td>column D</td>
               <td>column E</td>
            </tr>
            <tr>
               <td>1</td><td>2</td><td>3</td><td>2</td><td>3</td>
            </tr>
            <tr>
               <td>11</td><td>12</td><td>11</td><td>12</td><td>13</td>
            </tr>
         </table>
      </div>

    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...