显示div溢出-x滚动条而不设置div的宽度？

发布于 2024-12-02 04:28:24 字数 1876 浏览 1 评论 0原文

#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%。我到处寻找，日子一天天过去，我根本找不到正确的解决方案。如果有人有建议，我将非常感激。谢谢。

原文

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

The content wrapper contains a table which holds some data which size is unknown, and must not be wrapped so white-space:nowrap is set, and it works fine. The height of the content div has a fixed size and the vertical scrollbar appears ok. The main div's width is set to 95%. The problem is that the content div does not activates the scrollbar when the data is too long to fit, instead it resizes itself to the right side of the screen, even if the wrapper main div's width is set to 95%. Is there a way to activate the content div's horizontal scrollbar without setting it's width? It's maximum width should be in line with the width of the main wrapper, it would not be a problem even if it has a fixed width, but then it must fill the remaining area to be in line with it's wrapper main div which as I mentioned has it's width set to 95%.
I searched everywhere, days are passing and I simply can't figure out a right solution. Please if anyone has a suggestion I would appreciate it very much. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最美不过初阳 2024-12-09 04:28:24

内部

将与您拥有的 CSS 一起保留在容器

内。但是，因为您有一个

围绕内部 
，所以它的行为不符合预期。

我认为解决方案可能是在没有 的情况下布局页面。

此示例显示使用当前 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>

The inner <div> will stay inside the container <div> with the CSS you have. But, because you have a <table> surrounding the inner <div> it doesn't behave as expected.

I think the solution may be to layout the page without the <table>.

This example shows the inner <div> being constrained inside the outer <div> using your current 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>

回复收藏 0 原文

~没有更多了~