Question

我的网站有问题，我想在标题中有一张名为banner.png的图片，我应该使用标题而不是div，因为这是html5。

这是index.html文件

<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
    <title>Erling's website</title>  
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>

这是样式表

header {
    background-image: url("img/banner.png");
    background-repeat: no-repeat;
    height: 15%;
    position: absolute;
    width: inherit;
}

我在检查元素时找到了图片，但看起来高度不起作用。

header {
  /*DEMO*/background-color: red;
  background-image: url("img/banner.png");
  background-repeat: no-repeat;
  height: 15%;
  position: absolute;
  width: inherit;
}

<!-- HTML 5 -->
<!DOCTYPE html>
<html>

<head>
  <title>Erling's website</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>

<body>
</body>

</html>

Answer 1

问自己：15％的内容？

如果您使用浏览器的开发者工具并从打开的窗口中选择html或body标记，您将看到html和正文没有任何高度。 15％的0 = 0，因此标题必须具有固定的高度，例如：230px，或者您可以在CSS文件中添加此样式：

Html,body {position:relative;height:100%;}

Answer 2

使用标题添加

的上述百分比高度

html, body {
 height: 100%;
}

或者将标题上的高度更改为填充底部。

header {
    padding-bottom: 30%;
}

Answer 3

上述答案将解决问题，但如果您因任何原因想要在标题中将高度设置为％，则需要将html的大小设置为100％，以便标题获得15％的标题。

html{
    height:100%;
    float:left;
    }

Answer 4

您可以使用view units，Private Sub cbLinqQuery_CheckedChanged(sender As Object, e As EventArgs) Handles cbLinqQuery.CheckedChanged SafeCheckChg(cbDataTable, AddressOf cbDataTable_CheckedChanged, cbLinqQuery.Checked) SafeCheckChg(cbArray, AddressOf cbArray_CheckedChanged, cbLinqQuery.Checked) btnDefaultBoundData_Click(sender, e) End Sub Private Sub SafeCheckChg(ByRef cb As CheckBox, ByRef handler As EventHandler, checked As Boolean) RemoveHandler cb.CheckedChanged, handler cb.Checked = checked AddHandler cb.CheckedChanged, AddressOf handler.Clone End Sub获取视图高度，vh获取视图宽度JS Fiddle

vw

Answer 5

当您说height: 15%;时，您的意思是标题应该取{父母的{1}}。这没有任何效果，因为您没有设置父{J} 15%的高度。您要么必须给出身高，要么使用body而不是pixels

percentage

Answer 6

我终于找到了一个解决方案：请注意，宽度也不起作用

    header {
      background-color: red; /* red for DEMO */
      background-image: url("img/banner.png");
      background-repeat: no-repeat;
      height: 15%;
      position: absolute;
      width: inherit;
    }

    html, body {
      height: 100%; /* fix height*/
      width: 100%; /* fix width */
      margin: 0; /* fix width, or margin: 0 -5px; in header {} */
    }

<!-- HTML 5 -->
<!DOCTYPE html>
<html>

<head>
  <title>Erling's website</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>

<body>
</body>

</html>

关于此问题的另一篇文章：Percentage Height HTML 5/CSS，它还提到了使用height: 15vh;

Answer 7

<header>元素在html中的位置

将<header>元素作为<html>元素的子元素是无效的html。根据{{3}}，您的HTML无效。

您必须将<header>元素移动到<body>元素内。

这里发生的部分原因是因为<header>元素位于<body>元素之前，因此文档模型必须创建<body>元素以包含<header>元素所以你的<body>元素被忽略了。

将<header>标记移至<body>内并从那里开始。

修复后，您可以处理尺寸问题。由于<body>元素中没有任何内容，因此宽度将为0.您可以通过为主体提供100％的宽度来强制它填充框架，并且标题图像将起作用。

body {
    width: 100%;
}

如果您希望标题为可见窗口高度的15％，则更改高度以使用vh（视口高度）单位，该单位是可见窗口高度的百分比。

header {
    [...]
    height: 15vh;
}

html5图像标题没有显示

7 个答案: