Question

上下文：我正在通过MySQL编写有关PHP的教程，目前正在假装一个网站。 HTML / CSS知识是本教程中假定的，而我没有。一切都进行得很好，除了我不知道如何使标题覆盖页面的整个宽度。

我尝试过的操作：首先，我尝试自行解决问题-我转到了所使用的CSS，并尝试将“页眉”和“页脚”的宽度从980px调整为100 ％并测试它，但没有骰子。 CSS是本教程中的可下载文件，不是我写的东西，而980px是我下载时的设置方式。在我自己修改失败后，我转向google，我发现这个问题已经问过here，但是解决方案是我已经尝试过的方法。这很奇怪，因为在本教程开始时，当导师运行该网页时-他只是像我一样的部分页面，但是突然间，在其中一个视频中，他的标题就跨越了整个页面。我在视频中检查了练习文件，但是他的CSS文件/页眉/页脚页面与我的完全相同。我尝试阅读一些有关CSS和HTML等之间交互的信息，虽然我有了大致的了解，但仍然学不到足够的知识来解决问题。

代码： 我有一个页眉/页脚.php，分别包含在浏览器中每个可见的.php页面的开始/结尾。他们在这里：

标题

<?php   if(!isset($page_title)) { $page_title = 'Staff Area'; } ?>

<!doctype html>

<html lang="en">   
  <head>
    <title>GBI - <?php echo h($page_title); ?></title>
    <meta charset="utf-8">
    <link rel="stylesheet" media="all" href="<?php echo url_for('/stylesheets/staff.css'); ?>" />   
   </head>

  <body>
    <header>
      <h1>GBI Staff Area</h1>
    </header>

    <navigation>
      <ul>
        <li><a href="<?php echo url_for('/staff/index.php'); ?>">Menu</a></li>
      </ul>
    </navigation>

脚

<footer>
  &copy; <?php echo date('Y'); ?> Globe Bank
</footer>

</body>
</html>

我的CSS的选定部分（从上面回忆：我已经修改过宽度值。h1块本来没有宽度值，但是我自己尝试了）

html {
  height: 100%;
  width: 100%;
}

body {
  height: 980px;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0055DD;
  color: white;
}

header h1 {
  width: 100%;
  margin: 0;
  padding: 5px;
  font-size: 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
}

我要加载页眉和页脚的页面示例：

<?php require_once('../../private/initialize.php'); ?>

<?php $page_title = 'Staff Menu'; ?>
<?php include(SHARED_PATH . '/staff_header.php'); ?>

<div id="content">
    <div id="main-menu">
        <h2>Main Menu</h2>
        <ul>
            <li><a href="<?php echo url_for('/staff/subjects/index.php');?>">Subjects</a></li>
            <li><a href="<?php echo url_for('/staff/pages/index.php');?>">Pages</a></li>
        </ul>
    </div>

</div>

<?php include(SHARED_PATH . '/staff_footer.php'); ?>

我理解以上内容并不完全构成MWE，对此我深表歉意。因为我是新手，所以我不知道问题可能在潜伏于交互文件的集合中，因此我不知道如何将其浓缩为MWE，而又无法隐藏问题所在。

问题：

为什么我的标题没有覆盖整个页面？

如果有人愿意，我会在运行时发布屏幕快照。

编辑： 加载后的页面截图。此页面是上面php代码的最后引用部分：

Answer 1

body { width: 100vw; }或header { width: 100vw; }都可以解决问题。您只需要一个即可。

将header的宽度设置为100%，并且body也设置为100%时，没有参考点。换句话说，body { width: 100%; }是哪个其他元素的宽度的100％？您必须在某个地方设置一个“显式”宽度。

100vh在行为上与100%类似，但是100vh将始终成为“浏览器”的100％窗口”（或更确切地说是视口宽度，如Chase Ingebritson所述）。

如果这些都不起作用，请清除缓存或确保没有其他CSS依赖项干扰页面的显示方式。

标头未覆盖整个页面

1 个答案: