html - 主体边框未到达主体底部-6ren

html - 主体边框未到达主体底部

转载作者：行者123 更新时间：2023-11-28 05:24:09

25

4

我试图在我的网页的整个主体周围创建一个边框，但是每当我在 body 标签周围放置一个边框时，它都没有到达底部。此外，由于某种原因，正文和页面底部之间有一个空间。请指教!

这是代码:(参见 https://jsfiddle.net/04tpunop/)

HTML:

<!DOCTYPE html>
<body>
    <header>
        <nav>
            <div id="navBar">
          <a class="hdrBtn">Button</a>
                    <a class="hdrBtn">Button</a>
            </div>
        </nav>
    </header>
    <div id="banner">
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
    </div>
    <div id="content">
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
    </div>
</body>

CSS:

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

html {
    background-color: black;
    background-size: 500px;
}

body {
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
    /*padding: 0 20px;*/
    background-color: white;
    overflow: auto;
  border: 20px solid white;
}

header {
    top: 0;
    width: 80%;
    border-top: 10px solid white;
    border-bottom: 2px solid #ff0000;
    position: fixed;
    z-index: 10;
    background-color: white;
}

#banner {
    width: 80%;
    height: 500px;
    position: fixed;
    top: 68px;
    background-color: blue;
}

#content {
    width: 100%;
    position: relative;
    top: 568px;
    background-color: grey;
    /*height: 1000px;*/
}

a.hdrBtn {
    font-family: 'Open Sans', sans-serif;
    color: black;
    padding: 16px 15px 10px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    text-decoration: none;
    outline: none;
    display: inline-block;
    text-align: center;
    -o-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
    -o-transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    -ms-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear;
  margin-left: 6%;
}

button.hdrBtn:hover, a.hdrBtn:hover {
    background-color: #f1f1f1;
    color: #ff0000;
}

.center {
    text-align: center;
}

最佳答案

我认为您的 body 可能只是在包裹内容物。尝试在 CSS 中将高度设置为 100%。

如果这不起作用，请尝试将内容包装在高度和宽度设置为 100% 的 DIV 中

关于html - 主体边框未到达主体底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38886141/

25

4

0

文章推荐： c++ - vector 下标与 odeint 不匹配 (C++)

文章推荐： javascript - html5 Canvas : auto font size for drawn wrapped rotated text

文章推荐： c++ - 已保存文件的 Windows 事件 Hook

文章推荐： javascript - 连接 JavaScript 和 Ms Sql

c - 到达/出发计划
我正在尝试制作一个程序，显示飞机到达和起飞的时间表，然后要求用户在 C 中输入时间。然后程序将找到最接近输入时间的到达时间用户。问题是它没有按预期工作，并且给我一个错误的到达时间，甚至不接近输入的时间
excel - 到达 future 日期时如何更改单元格的颜色
我有一个不断填充新信息行的 Excel 表，其中一列与联系客户的日期(有时为空 - 无需输入日期)相关，如果在 10 内没有收到回复从那以后的几天，我们必须发送提醒，如果过了 17 天，我们必须取消订
rfid - 使用有源RFID标签检测存在(到达/离开)
实际到达很简单，标签进入接收器天线范围，但是偏离是造成问题的原因。首先，我们了解一些有关设置的信息。标签: 它们以433Mhz的速度工作，每1.5秒钟发送一次“心跳”，移动时进入传输突发模式，这种
Android 到达 getInputStream 时崩溃
我构建了这段代码来从 URL 获取 XML我使用了 AsyncTask，当到达 getInputStream() 点时，半身应用程序仍然崩溃重点是我想从 url 获取 XML 作为字符串。我尝试不
Delphi 到达 DBGrid 的行
所以我有一个 TDBGrid，我的目的是搜索 DBGrid 的 Fieldname 并将其与我的编辑的 Text 属性进行比较，如果它们相等，则我想将找到匹配项的整列写入列表框。通过带有 fiel
java - 到达 Controller 时子类型数据丢失
我会写得非常简单，因为实际的修复并不比我不理解的实际设计重要。似乎一旦我的 @RequestBody 命中 @Controller，有关 subtype 的信息就会丢失。假设我们有: class A
java - 到达 N 步的方法数
所以我正在做这个简单的动态编程问题，关于达到 n一次只能走 1 或 2 步。我知道答案基本上是一个斐波那契序列，答案是:达到n-2的步骤数+ 到达 n-1 的步数. T(n) = T(n-1) +
javascript - 到达 anchor 标记时如何启动功能
(function start (){ $('.bar').each(function(i){ var $bar = $(this); $(this).append('')
java - 到达 main 方法的末尾时程序不会终止
我有一个程序，我在启动它之前要求用户输入。 public static void main(String args[]) { String database = JOptionPane.sho
html - 提交到达根本没有图片
就是这样，我必须在提交按钮上有一张图片，但它根本没有出现。我希望它看起来像这样: 现在看到我的是这样的，我不明白为什么它没有出现在页面上。 HTML CSS #sognu { bac
javascript - 到达 div 的顶部
click here 点击后重定向至 xyz.com/#contact，现在我想获得div #abc的顶部位置 //set the value as a variable, and remove t
javascript - 到达 scrollspy 部分的末尾时强制停止滚动
here is a fiddle to know where I am starting from 我要解决的问题涉及对单个 html 文件的内容进行“分页”，以一种将它们一次锁定在一个部分中的方式。
javascript - 到达 anchor 标记时如何运行javascript函数？
是否可以在传递页面部分时运行 javascript 函数？我想要实现的是类似于 Twitter Bootstrap 的 scrollspy。最佳答案您可以使用 waypoints 插件: http
javascript - 到达 iframe 底部时触发函数
我有一个可以动态调整其大小的 iframe。我通过父页面上的发布消息和监听器解决了这个问题，因此每次 iframe 的内容发生变化时，iframe 的大小也会发生变化，并且永远不会有滚动条。在 if
javascript - 到达 anchor 时使导航栏透明
我试图让我的导航栏在到达我在网站下方设置的 anchor 时变得透明。这是我的HTML Home About Logo W
c++ - 到达 void 函数的结尾会产生意想不到的结果
我写了一个简单的程序来管理姓名列表(下面是程序的一部分)。我希望函数“choice()”结束并返回到 main()——从而结束程序——当用户对变量“option”的输入为 4 时。然而，choice(
linux - 到达 monowall 后面的内部服务器
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
c - 到达 EOF 后读取文件
代码片段在 while 循环后有一个 EOF，之后必须再次重新打开文件 - fopen 被重用。我的问题是是否有办法避免这种笨拙的 fopen 双重使用或以某种方式不使用 EOF？ if (!(f=f
css - 到达 css 节点时遇到问题
从这个页面: http://www.beta.inegi.org.mx/app/buscador/default.html?q=e15a61a 我正在尝试检索此网址: http://www.beta.
python - 到达 JSON 中未知值后面的字符串
我使用维基百科的 API 来获取有关页面的信息。API 给我这样的 JSON: "query":{ "pages":{ "188791":{ "pageid":18879

首页

博学

6Ren·AI

商城

html - 主体边框未到达主体底部