web元素调整大小会降低高度但正确调整宽度?

时间:2021-03-24 17:46:59

标签: javascript css

我有一系列基于 wcDocker 的 div 元素,最后一个是一个大于屏幕尺寸的表格。宽度始终正确显示并正确调整大小(“宽度:100%”),但设置为底部的100%切割时的高度并且不显示滑块,当设置为显式(例如500px)时,则显示正确使用幻灯片,但在调整大小低于 500 像素时被截断。

我想让表格高度使用完整的可用尺寸,显示一个滑块并自动调整大小,而不会像“宽度”那样超载任何“调整大小”事件。 “溢出”设置为“自动”。

这是一个包含大量库和 css 层的复杂项目,有谁知道哪个 css 标签会使“宽度”和“高度”的行为方式如此不同?

正如评论中所建议的,我设法用相对最少的代码重现了它(不确定下面的链接会持续多久): https://www.w3schools.com/code/tryit.asp?filename=GOVQIVTEJ3HY

正如您可以通过调整窗口大小的示例来检查宽度(显示正确的水平幻灯片,最重要的是在需要时显示垂直幻灯片),但是有时高度会被截断,水平幻灯片会消失。

欢迎提出任何建议和研究方向,如有小事请见谅。

如果上面的链接过期了,下面是代码:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
   background-color: lightblue;
   width: 100%;
   height: 100%;
   overflow: auto;
   display: block;
}

body.ex2 {
   overflow: hidden;
}

div.box {
   width: 300px;
   height: 300px;
   min-width: 300px;
}

span.long {
   min-width: 600px;
   display: inline-block;
}

</style>
</head>
<body class="ex2">

<h1>The overflow Property</h1>

<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>

<h2>overflow: scroll:</h2>
<div class="ex1">
<div class="box">
<span class="long">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</body>
</html>

0 个答案:

没有答案