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

CSS高度百分比无法正常工作

严昊昊
2023-03-14
问题内容

这个问题已经在这里有了答案

高度百分比HTML 5 / CSS (6个答案)

3年前关闭。

我有以下简单的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">



<head>

  <title>Live Feed</title>



  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />



  <style>

    body {

      margin: 0px;

      padding: 0px;

    }

  </style>

</head>



<body>

  <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">

    I should be tall

  </div>

</body>



</html>

但是div不会以高度为100%显示。为什么?


问题答案:

您需要在所有父元素上设置100%的高度,在这种情况下,您的正文和html都应设置为100%。这个小提琴显示它正常工作。

html, body { height: 100%; width: 100%; margin: 0; }

div { height: 100%; width: 100%; background: #F52887; }


<html><body><div></div></body></html>


 类似资料:
  • 问题内容: 我尝试了响应式CSS布局,但是“ top:50%”不能工作,而“ left:50%”可以。为什么会这样呢? 问题答案: 定义父容器的尺寸,例如div: 要么 另一种方法是通过其顶部,底部,左侧和右侧属性来拉伸父容器(即div)。像这样:

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

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

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

  • 我有一个基本的flexbox布局,我正在尝试应用高度百分比,目前他们都占据相同的百分比… 这在FlexBox中是可能的吗?如果是的话,有没有人可以给我一个例子呢?

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