如何使DIV的高度固定,当超出固定高度时,让文字自动上下循环滚动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使DIV的高度固定,当超出固定高度时,让文字自动上下循环滚动相关的知识,希望对你有一定的参考价值。

如何使DIV的高度固定,当超出固定高度时,让文字自动上下循环滚动,而不是出现滚动条和变高?

首先让我们认识这个<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的。

behavior属性

behavior属性的参数值为alternate、scroll、slide中的一个,分别表示文字来回滚动、单方向循环滚动、只滚动一次,需要注意的是:如果在<marquee>标签中同时出现了direction和behavior属性,那么scroll和slide的滚动方向将依照direction属性中参数的设置。

<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee><marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> <marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
bgcolor属性文字滚动范围的背景颜色,参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。如下所示:<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>
参考技术A 先把DIV的溢出设为隐藏(overflow: hidden;)然后在DIV里加一段滚动的代码,这样DIV就不会被撑开了!

如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值?

【中文标题】如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值?【英文标题】:How to make a parent container have its height set to the maximum value between a fixed px height and child content height? 【发布时间】:2021-12-03 08:40:17 【问题描述】:

如何让父容器满足以下条件:

    最大高度为 80vh 具有以下最大高度:a) 400 像素(或任何固定高度)b) 子内容的高度 子内容不能超出父容器 当子内容增长时,它们会继续增长,直到达到父级的最大高度 80%(然后滚动)

我已经有了 1、3 和 4 的逻辑。但我不确定如何实现第二个条件。这是我写的一些示例代码:

.parent 
  height: 400px;
  width: 80%;
  margin: 100px auto;
  max-height: 80vh;
  border: solid 5px black;
  overflow: scroll;


.child 
  border: solid 5px red;
  width: auto;
  height: 550px;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

我想我正在寻找像 height: max(400px, max-content) 这样的东西。但这是可能的/我将如何实现这一点?任何想法将不胜感激!

【问题讨论】:

afak css 规则中没有 OR 选项,你玩过 min-content 和 max-content 吗? developer.mozilla.org/en-US/docs/Web/CSS/min-content 是的,我的意思是我希望父高度为(400px,最大内容)的最大值。但我不认为我们可以使用这样的最大内容,所以我想知道是否有其他方法来实现相同的逻辑。 【参考方案1】:

如果你删除父级的高度,父级会从子级获取高度,但不会超过80vh,这是父级的最大高度,所以如果子级高度大于80vh,父级会滚动其余身高的孩子。

【讨论】:

对不起,我的意思是当子内容高度是 0px 到 400px 之间的任何高度时,我希望父容器为 400px。所以我希望父容器的高度至少为 400px,除非 400px 大于 80vh(如果我们放大浏览器可能会发生这种情况) 改变高度:400px;最小高度:400px;在父母中 除非 400px 大于 80vh(如果我们放大浏览器可能会发生这种情况)。我认为在这种情况下最好使用响应式 CSS 正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。【参考方案2】:

来自MDN:

最大高度覆盖高度,但最小高度覆盖最大高度。

因此,为了确保您的条件 1 始终满足(最大高度为 80vh),您不仅需要将 max-height 设置为该值,还必须确保如果 400px 大于 80vh,则高度不会消失80vh以上,否则会到400px,超过80vh的最大高度。

max-height: 80vh;
min-height: min(400px, 80vh);

【讨论】:

以上是关于如何使DIV的高度固定,当超出固定高度时,让文字自动上下循环滚动的主要内容,如果未能解决你的问题,请参考以下文章

css, 怎样使td高度固定,当内容超出设定高度时,超出部分隐藏。

css怎么设置高度固定 宽度自适应

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

布局:上下两个div高度固定,中间自适应

如何使父容器的高度设置为固定 px 高度和子内容高度之间的最大值?