当前位置: 首页 > 面试题库 >

设置CSS最高百分比无法正常工作

宗政燕七
2023-03-14
问题内容

我尝试了响应式CSS布局,但是“ top:50%”不能工作,而“ left:50%”可以。为什么会这样呢?

<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
    <div style="position:absolute;top:50%;left:50%;">
    </div>
</div>

问题答案:

定义父容器的尺寸,例如div:

<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
    </div>
</div>

要么

另一种方法是通过其顶部,底部,左侧和右侧属性来拉伸父容器(即div)。像这样:

<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
    </div>
</div>


 类似资料:
  • 问题内容: 这个问题已经在这里有了答案 : 高度百分比HTML 5 / CSS (6个答案) 3年前关闭。 我有以下简单的代码: 但是div不会以高度为100%显示。为什么? 问题答案: 您需要在所有父元素上设置100%的高度,在这种情况下,您的正文和html都应设置为100%。这个小提琴显示它正常工作。

  • 问题内容: 我试图在CSS 中将a设置为一定的百分比高度,但它的大小与其中的内容相同。但是,当我删除HTML 5 时,它可以工作,并按需要占用整个页面。我希望页面进行验证,那我该怎么办? 我在上有此CSS ,其ID为: 问题答案: 我正在尝试在CSS中将div设置为某个百分比高度 百分比是多少? 要设置百分比高度,其父元素(*)必须具有明确的高度。这是不言而喻的,如果您将height保留为,则该块

  • 问题内容: 我有一个网站,我决定用纯CSS代码段替换基于jquery的切换框。当我使用固定的高度值进行过渡时(CSS的最后几行),效果很好,但是使用该值时,动画丢失了,只有高度变化才起作用! 有没有办法将其与自动值一起使用?我想使用可变文本而不使用脚本。 问题答案: 如果您只想使用CSS,则一种解决方案是过渡而不是将其设置为比以往任何时候都更大的值… 您将需要稍稍缩短转换的速度,但是至少该示例使您

  • 问题内容: 我有一个div,我要填充整个身体高度,而不要填充以像素为单位的设定值。但是我不能上班。 我要执行此操作的原因是,我的元素具有基于某些不同标准的动态高度,例如,标头的高度根据其可以包含的不同元素而变化。然后,内容div需要扩展以填充剩余的可用空间。 但是,div元素保持内容的高度-好像并不能将100%解释为body元素的高度。 我将不胜感激任何帮助或朝着正确方向的指点。 问题答案: 您需

  • 问题内容: 我试图将字符串中的组保存到数组中,以便在需要时可以在各个变量中使用它们。为此,我使用 split, 但是由于某种原因,我只能在数组的第一位置获得完整的字符串:Ultimate_array [0]。如果我想使用Ultimate_array [1],则会出现类似“越界”的异常。你知道我在做什么错吗? 问题答案: 您需要转义( 字符串末尾 )

  • 问题内容: 我想使导航栏在滚动到顶部时停留在顶部,但是它不起作用,我也不知道为什么。如果可以的话请帮我,这是我的HTML和CSS代码: 问题答案: 粘性定位是相对定位和固定定位的混合。将该元素视为相对位置,直到它超过指定的阈值为止,此时将其视为固定位置。 … 您必须指定的至少一个阈值,,,或为粘稠定位像预期的那样。否则,将无法与相对位置区分开。[资料来源:MDN ] 因此,在您的示例中,您必须使用