Question

在我的应用程序中，左侧的“ sidebar-left”具有侧边栏（折叠栏），右侧的“ content”具有不同类型的内容的容器。而且我无法处理此容器的宽度，它必须占用剩余宽度的100％，并且可以正常工作的其他类型的内容都很好，但是如果我将可滚动表格放置在此“内容”容器中，则它始终会尝试拉伸该表格屏幕大小的100％，而不是容器大小的屏幕大小，屏幕的宽度在边栏大小的宽度中增大。这是我的页面：

    .wrapper {
        display: flex;
        align-items: stretch;
      width: 100%;
    }

    .sidebar-left {
      width: 300px;
      background: red;
    }

    .content {
      /*width: calc(100% - 300px);  it works, but .sidebar-left should have flexible size*/
      width: 100%;
    }

    .sidebar-right {
      width: 20px;
      background: blue;
    }

    .scrollable-table {
        overflow: scroll;
        width: 100%;
        white-space:nowrap;
    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Collapsible sidebar using Bootstrap 4</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

</head>

<body>
    <div class="wrapper">
        <div class="sidebar-left">
            Sidebar left
        </div>
        <div class="content">
            <div data-v-e474bf0e="" class="scrollable-table">
                <table class="table table-striped table-hover table-sm">
                    <thead><tr><th class="sticky-first-column text-center">№ документа</th> <th class="sticky-second-column text-center">Дата</th> <th class="text-center">ст. Відправлення</th> <th class="text-center">ст. Призначення</th> <th class="text-center">Відправник</th> <th class="text-center">Отримувач</th> <th class="text-center">Вантаж</th> <th class="text-center">К-ть вагонів</th> <th class="text-center">Маса вантажу</th></tr></thead> 
                    <tbody><tr><td class="sticky-first-column text-center">33168097</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(341408) славута i</td> <td class="text-capitalize">(400409) одесса-порт (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(5711) Админитрация Одесского Морского Порта комплекс ЗПК ООО «Бруклин-Киев»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">5</td> <td class="text-right">3 477,60</td></tr><tr><td class="sticky-first-column text-center">33169244</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">1</td> <td class="text-right">694,50</td></tr><tr><td class="sticky-first-column text-center">33169301</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">3</td> <td class="text-right">2 087,00</td></tr><tr><td class="sticky-first-column text-center">33169343</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">4</td> <td class="text-right">2 792,50</td></tr><tr><td class="sticky-first-column text-center">35991256</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 388,50</td></tr><tr><td class="sticky-first-column text-center">35997469</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 438,50</td></tr><tr><td class="sticky-first-column text-center">40831539</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(416604) блакитное</td> <td class="text-capitalize">(424507) ксениево (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3804) ООО «ИЗТ» для ПИИ «ГЛЕНКОР АГРІКАЛЧЕР УКРАЇНА»</td> <td class="text-capitalize">(014003) Ячмень</td> <td class="text-right">4</td> <td class="text-right">2 358,50</td></tr><tr><td class="sticky-first-column text-center">43300730</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(443300) лихачево</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(2481) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3566) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">10</td> <td class="text-right">6 932,00</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
</div>
</body>

</html>

我尝试制作width: calc(100% - 300px);，但必须折叠边栏，其大小从80到300像素不等。我发现了常见问题，但解决方案不适用于我的情况。它始终尝试将.content div拉伸到屏幕的100％宽度，而不是剩余的宽度。

Answer 1

您可以使用相对单位作为宽度。例如vw，它是视口的宽度（如果需要，可以使用“屏幕宽度”。）

vh =视口高度

在这里我使用了10vw和90vw，但是您可以调整。

.wrapper {
        display: flex;
        align-items: stretch;
      width: 100%;
    }

    .sidebar-left {
      width: 10vw;
      background: red;
    }

    .content {
      width: 90vw;
      width: 100%;
    }

    .sidebar-right {
      width: 20px;
      background: blue;
    }

    .scrollable-table {
        overflow: scroll;
        width: 100%;
        white-space:nowrap;
    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Collapsible sidebar using Bootstrap 4</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

</head>

<body>
    <div class="wrapper">
        <div class="sidebar-left">
            Sidebar left
        </div>
        <div class="content">
            <div data-v-e474bf0e="" class="scrollable-table">
                <table class="table table-striped table-hover table-sm">
                    <thead><tr><th class="sticky-first-column text-center">№ документа</th> <th class="sticky-second-column text-center">Дата</th> <th class="text-center">ст. Відправлення</th> <th class="text-center">ст. Призначення</th> <th class="text-center">Відправник</th> <th class="text-center">Отримувач</th> <th class="text-center">Вантаж</th> <th class="text-center">К-ть вагонів</th> <th class="text-center">Маса вантажу</th></tr></thead> 
                    <tbody><tr><td class="sticky-first-column text-center">33168097</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(341408) славута i</td> <td class="text-capitalize">(400409) одесса-порт (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(5711) Админитрация Одесского Морского Порта комплекс ЗПК ООО «Бруклин-Киев»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">5</td> <td class="text-right">3 477,60</td></tr><tr><td class="sticky-first-column text-center">33169244</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">1</td> <td class="text-right">694,50</td></tr><tr><td class="sticky-first-column text-center">33169301</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">3</td> <td class="text-right">2 087,00</td></tr><tr><td class="sticky-first-column text-center">33169343</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">4</td> <td class="text-right">2 792,50</td></tr><tr><td class="sticky-first-column text-center">35991256</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 388,50</td></tr><tr><td class="sticky-first-column text-center">35997469</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 438,50</td></tr><tr><td class="sticky-first-column text-center">40831539</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(416604) блакитное</td> <td class="text-capitalize">(424507) ксениево (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3804) ООО «ИЗТ» для ПИИ «ГЛЕНКОР АГРІКАЛЧЕР УКРАЇНА»</td> <td class="text-capitalize">(014003) Ячмень</td> <td class="text-right">4</td> <td class="text-right">2 358,50</td></tr><tr><td class="sticky-first-column text-center">43300730</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(443300) лихачево</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(2481) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3566) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">10</td> <td class="text-right">6 932,00</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
</div>
</body>

</html>

Answer 2

通过使用CSS自定义属性（变量），我们可以实现这一目标。

尝试一下。

fill

Answer 3

感谢上帝，我找到了解决方案，为避免内容容器宽度增加，它必须具有样式overfrow: hidden，现在，当我将可滚动表格放在该容器中时，它将填充所有剩余宽度，并且不要放大main容器。

这是结果代码：

    .wrapper {
        display: flex;
    }

    .sidebar-left {
      width: 300px;
      background: red;
    }

    .content {
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
    }

    .scrollable-table {
        overflow: scroll;
        white-space:nowrap;
        width: 100%;
    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Collapsible sidebar using Bootstrap 4</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

</head>

<body>
    <div class="wrapper">
        <div class="sidebar-left">
            Sidebar left
        </div>
        <div class="content">
            <div data-v-e474bf0e="" class="scrollable-table">
                <table class="table table-striped table-hover table-sm">
                    <thead><tr><th class="sticky-first-column text-center">№ документа</th> <th class="sticky-second-column text-center">Дата</th> <th class="text-center">ст. Відправлення</th> <th class="text-center">ст. Призначення</th> <th class="text-center">Відправник</th> <th class="text-center">Отримувач</th> <th class="text-center">Вантаж</th> <th class="text-center">К-ть вагонів</th> <th class="text-center">Маса вантажу</th></tr></thead> 
                    <tbody><tr><td class="sticky-first-column text-center">33168097</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(341408) славута i</td> <td class="text-capitalize">(400409) одесса-порт (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(5711) Админитрация Одесского Морского Порта комплекс ЗПК ООО «Бруклин-Киев»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">5</td> <td class="text-right">3 477,60</td></tr><tr><td class="sticky-first-column text-center">33169244</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">1</td> <td class="text-right">694,50</td></tr><tr><td class="sticky-first-column text-center">33169301</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">3</td> <td class="text-right">2 087,00</td></tr><tr><td class="sticky-first-column text-center">33169343</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(334008) красилов</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">4</td> <td class="text-right">2 792,50</td></tr><tr><td class="sticky-first-column text-center">35991256</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 388,50</td></tr><tr><td class="sticky-first-column text-center">35997469</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(350303) дубно</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3511) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">8</td> <td class="text-right">5 438,50</td></tr><tr><td class="sticky-first-column text-center">40831539</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(416604) блакитное</td> <td class="text-capitalize">(424507) ксениево (эксп.)</td> <td class="text-capitalize">(8346) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3804) ООО «ИЗТ» для ПИИ «ГЛЕНКОР АГРІКАЛЧЕР УКРАЇНА»</td> <td class="text-capitalize">(014003) Ячмень</td> <td class="text-right">4</td> <td class="text-right">2 358,50</td></tr><tr><td class="sticky-first-column text-center">43300730</td> <td class="sticky-second-column text-center">10.09.2020</td> <td class="text-capitalize">(443300) лихачево</td> <td class="text-capitalize">(403002) черноморская (эксп. для тис )</td> <td class="text-capitalize">(2481) ТОВ "УТЛ-2"</td> <td class="text-capitalize">(3566) ООО «ТИС» для ООО «М.В.КАРГО»</td> <td class="text-capitalize">(011005) Пшеница</td> <td class="text-right">10</td> <td class="text-right">6 932,00</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
</div>
</body>

</html>

如何使可滚动表占容器剩余宽度的100％，而不是屏幕的剩余宽度？

3 个答案: