- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
上下文:我正在学习有关 PHP 和 MySQL 的教程 - 目前正在制作一个模拟网站。本教程假设您具备 HTML/CSS 知识,而我没有。一切都很顺利,除了我不知道如何让我的页眉跨越页面的整个宽度。
我尝试了什么:首先我尝试自己解决问题 - 我转到我正在使用的 CSS 并尝试将“页眉”和“页脚”宽度从 980 像素调整到 100 % 并测试它,但没有骰子。 CSS是教程里的可下载文件,不是我写的,980px是我下载的时候设置的。在我自己修修补补失败后,我转向谷歌,我发现这个问题已经问过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>
© <?php echo date('Y'); ?> Globe Bank
</footer>
</body>
</html>
我的 CSS 的选定部分(记忆一下上面的内容:我修改了宽度值。h1 block 最初没有宽度值,但我自己尝试了)
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,而不可能隐藏问题所在。
问题:
Why does my header not span the whole page?
如果有人愿意,我会发布运行时的屏幕截图。
最佳答案
两个 body { width: 100vw; }
或 header { width: 100vw; }
会成功的。您应该只需要其中之一。
当您将header
的宽度设置为100%
,并且body
也设置为100%
>,没有引用点。换句话说,body { width: 100%; }
是哪个元素宽度的 100%?您必须在某处设置一个“显式”宽度,可以这么说。
100vh
在行为方式上与 100%
类似,但 100vh
始终/strong> 是“浏览器窗口”的 100%(或者更确切地说是视口(viewport)宽度,正如 Chase Ingebritson 所提到的)。
如果这些都不起作用,请清除缓存或确保没有其他 CSS 依赖项干扰页面的显示方式。
关于php - 页眉不跨越整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51107934/
我有以下 StackedXYAreaChart: 如何让我的绘图从左到右一直延伸,以便图表和绘图的边界之间没有空白?谢谢! 最佳答案 createStackedAreaChart()方法创建一个具有
当您将一个从 MarshalByRefObject 继承的对象传递给另一个 AppDomain 时,创建它的 AppDomain 所诱导的 GC.Collect() 不会收集该对象,前提是该对象在 G
我有一个使用 DefaultTableModel 的 JTable,它会生成如下表: 但是我很好奇是否有一种好方法可以在交叉的单元格中创建箭头,如下例所示...... 这对我来说似乎很难。有什么方法可
我在一个 div 中有 3 个 span。 Title Someinfomation Toright 为了使 c 类垂直对齐,我必须使用 margin-top 来修复它然而,对于 IE
首先,我完全意识到这个问题已经被问过很多次了,但是我发现的每种方法似乎都已经过时了和/或所引用的链接已不复存在。 所以我想知道是否有一种方法可以使 JTable 中的特定行跨越所有列,就像一个忽略该列
我需要帮助来按照下图获取 Bootstrap 布局。我无法弄清楚如何让黄色条与 Bootstrap 容器的整个宽度一起显示,而不影响列在移动 View 上的堆叠方式(第二张图片)。 所以我不需要在移动
我有一个包含以下数据的集合 _id name type 1 Banana Fruit 2 Tomato Vegetable 3 Carrot Vegetable 4 Tom
我知道有很多这类问题,但我没有看到一个与我的标准足够相似的问题。所以我想请你帮忙。我拥有的字段只是时间类型的开始和结束。我不能在其中涉及任何具体日期。如果时间范围不超过一天的午夜,我将直接比较两个元组
我有一个包含许多数字列的数据框,第一列需要针对第二列进行回归,然后存储 Rsqr 值,然后第一列针对第三列,然后存储 Rsqr 值...等等.这样做直到第 n 列回归到第 1 列。 我希望结果是一个数
标题可能很隐晦,但这是我的问题。 我有一张一天的事件表(行程表)。每个条目(例如参观博物馆)都有 slot_start 和 slot_end 时间列。这是 24 小时格式,例如 13:00:00 -
这对我来说是一个大问题,我正在努力解决不同设备之间的缩放问题。如果我只有一个回显的乘数,那就太好了,除非可以使用 javascript 变量来代替宽度、高度、字体大小等值... 例如,stackexc
不必是表格也可以是 div。 我的图片有一些透明部分需要混合。上半部分需要与下半部分不同的背景颜色混合。 所以在我看来,表格有 2 行,其中一行有一种背景颜色,另一行有另一种背景颜色,但图像跨越两行。
我试图以这样一种方式将 span 与 div 一起使用,即最后一个 span 占据 div 的剩余宽度 dddd: ssss .data{width:100%;display:bl
我在跨共享库边界使用 libstdc++ 的 std::any 实现和 mingw 时偶然发现了一个问题。它会产生一个 std::bad_any_cast 显然不应该(我相信)。 我使用 mingw-
我正在从一张 1bpp 索引图像剪切并粘贴到一张新图像。 一切正常,直到起始像素是 8 的除数。在下面的代码中,步幅等于相对于矩形宽度的值,直到我达到字节边界。那么步幅等于整个页面的宽度。 var c
我目前有以下 SwiftUI View : HStack { ... VStack { TextField { ... } SecureField { ... } Bu
我想构建一个标准的 JTable,但所有行都分布在一个特定的列上。因此该列必须仅包含一个以 JTextPane 作为其渲染器的单元格。您知道任何简单的方法吗? 注意:不需要第三方软件。 谢谢。 最佳答
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Auto-size dynamic text to fill fixed size container. 假
我有一个左浮动的 div 和它跨越左浮动的 div 之后的 div。 看这里http://www.kienitz.it/kienitz_cms/referenzen/ . 我想要这样:http://w
我在水平导航栏上有一个下 zipper 接,如下所示:
我是一名优秀的程序员,十分优秀!