Question

我的目标是创建一个包含overflow x和overflow y和auto的容器，因为我在那里渲染的任何东西（大表）都应该使客户端看到带有滚动的“窗口”有能力的内容+如果该容器与引导程序4 col和row一起使用，那就更好了。我不想硬编码高度和宽度。

我认为代码应该可以，但是不可以

.overflow-table {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.overflow-table .row {
    display: block;
}

<div class="overflow-table">
    <div id="dvData"></div>
</div>
<!-- to dvData I render at code behind table--> 

<div class="overflow-table">
    <div id="dvData">
         <table class="overflow-table"> <!-- I try too something like this-->
    </div>
</div>

谢谢！

solution

Answer 1

在表格周围的max-width上设置max-height和div。使用vw和vh单位或百分比来避免硬编码宽度和高度。

.window-overflow {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 95vh;
    max-width: 100%;
}

https://codepen.io/nickfindley/pen/QzGWPb

具有引导程序4的溢出容器

1 个答案: