如何让DIV内容长大到一定程度？

我有一个<div>它围着一张桌子包裹，像这样：如何让DIV内容长大到一定程度？

<div class="container"> 
    <table> 
     rows... 
    </table> 
</div> 
<div class="buttons"> 
    Here I have two buttons 
</div>

下表我有两个按钮。我想要扩展表格并添加新行时移动按钮。这工作。

我想要的是，一旦按钮到达窗口的末端，滚动条就应该出现在桌子上，这样无论窗户有多小，按钮总是可见的。

这必须完成没有Javascript和我卡在CSS部分。

这是我的CSS：

.container { 
    width: 100%; 
    height: 100% 
    overflow-x: auto; 
    overflow-y: auto; 
}

有什么我可以添加到表，使其工作？当我缩小窗口时，我可以让它显示一个垂直滚动条 - 这很棒 - 但我找不到水平滚动条的解决方案。

所以总结一下，当屏幕变小或者桌子变得很大以至于带按钮的div将被扔出窗外时，我想要水平滚动条。

任何想法？

来源

2017-08-01 captain

添加white-space: nowrap如果你想这样做没有弯曲。你可以不喜欢这样

.buttons { 
 
    height: 40px; 
 
} 
 
.container { 
 
    max-height: calc(100vh - 40px); 
 
    overflow: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <table> 
 
     <tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr><tr><td>Row</td></tr> 
 
    </table> 
 
</div> 
 
<div class="buttons"> 
 
    Here I have two buttons 
 
</div>

来源

2017-08-01 09:33:03 jagsler

一个问题，如果我加入div容器上面的更多的东西？我必须在最大高度计算中手动添加容器上方所有其他div的高度吗？ – captain

是的，认为你将不得不补充说。如果你将一个固定高度的东西放在这个上面，你可以稍微改变一下这个代码，以便只包含这个之上的单个元素的高度。请参阅：https://codepen.io/japmul/pen/EvKrZe 虽然您可能会更好地使用flex，但如果这对您是可能的。 – jagsler

我稍后会检查Flex解决方案，我不知道现在是否可以使用它。但问题是这张表会插入不同的网站。所以它可能是这个容器div可能有另外两个div，导航条等，我必须在没有Javascript的情况下实现这一点，我猜CSS必须有一点动态。你有什么建议吗？我现在正在做实验，看看什么可行，哪些不行。 – captain

你可以在你的情况父元素上使用Flexbox的其body并设置高度100vh然后还要设置overflow-y: auto上container。

如果你也想水平滚动条，那么你只需要在tdDEMO

body { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 
.container { 
 
    overflow-y: auto; 
 
}

<div class="container"> 
 
    <table> 
 
     <tbody> 
 
     <tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
<div class="buttons"> 
 
    Here I have two buttons 
 
</div>

来源

2017-08-01 09:30:42

如何让DIV内容长大到一定程度？

回答

相关问题