当前位置: 首页 > 知识库问答 >
问题:

内容超过页脚

华凌
2023-03-14
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="CSS/main.css">
    <link rel="stylesheet" type="text/css" href="CSS/navbar.css">
    <title>Home Page</title>
  </head>

  <body>
    <div class="contactandsocial">

    </div>
    <nav class="navbar navbar-default">

    </nav>
    <div class="container">
      <div class="row">

      </div>
    </div>
    <footer>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/42e4157b18.js"></script>
  </body>

</html>

和我的CSS:

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00AEFE;
  height: auto;
}

共有1个答案

西门建安
2023-03-14

你有两个选择。

A.固定页脚(坏)

这很糟糕,因为现在一半以上的流量来自移动设备,屏幕空间非常宝贵,你不应该用固定的元素来占用它。另一个主要缺点是

必须具有固定的高度。或者,您可以使用一个javascript函数,根据页脚的 height更新页面内容' bottom-padding上的 page.loadpage.resize事件。如果需要,我可以提供它,但是,这(至少在概念上)是一个糟糕的布局选择:

footer {
  position: fixed;
  height: 100px;
  bottom: 0;
  width: 100%;
}
nav + .container {
  margin-bottom: 120px;
}

/* this is just coloring so you can see elements, you don't need it */
body {margin: 0; padding: 0}
body > * {padding: 10px;}
.contactandsocial { background-color: #ccc;}
nav, footer { background-color: #424242; color: white;}
<div class="contactandsocial">
 I am contact and social
</div>
<nav class="navbar navbar-default">
 I am navigation
</nav>
<div class="container">
    <div class="row">
       Fall asleep on the washing machine touch water with paw then recoil in horror so instantly break out into full speed gallop across the house for no reason. Scream at teh bath purr for no reason going to catch the red dot today going to catch the red dot today yet curl up and sleep on the freshly laundered towels for paw at beetle and eat it before it gets away need to chase tail, and meow loudly just to annoy owners. Throwup on your pillow chirp at birds, or gnaw the corn cob and sit on the laptop knock dish off table head butt cant eat out of my own dish curl up and sleep on the freshly laundered towels peer out window, chatter at birds, lure them to mouth. Gate keepers of hell swat at dog, so lick sellotape jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water, cat snacks, but going to catch the red dot today going to catch the red dot today. Bathe private parts with tongue then lick owner's face thug cat swat turds around the house, but mark territory, yet missing until dinner time. Hate dog please stop looking at your phone and pet me for knock dish off table head butt cant eat out of my own dish behind the couch leave fur on owners clothes or damn that dog and chase the pig around the house. Leave fur on owners clothes eat a plant, kill a hand but drink water out of the faucet so destroy the blinds cat is love, cat is life get video posted to internet for chasing red dot or cat slap dog in face. Lick butt cat is love, cat is life human is washing you why halp oh the horror flee scratch hiss bite eat owner's food. Mark territory spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for why must they do that, so paw at your fat belly cat is love, cat is life sit in box, and see owner, run in terror. Cats making all the muffins meow all night having their mate disturbing sleeping humans loves cheeseburgers. Meow all night having their mate disturbing sleeping humans leave hair everywhere, or lie on your belly and purr when you are asleep lick butt. Human give me attention meow cat not kitten around licks paws chase laser meow loudly just to annoy owners. Hide at bottom of staircase to trip human catch mouse and gave it as a present. Step on your keyboard while you're gaming and then turn in a circle drink water out of the faucet. If it smells like fish eat as much as you wish lick yarn hanging out of own butt for hiss at vacuum cleaner tuxedo cats always looking dapper or eat grass, throw it back up. Kitty power! with tail in the air. Cats secretly make all the worlds muffins hate dog climb a tree, wait for a fireman jump to fireman then scratch his face fall asleep on the washing machine. Hack up furballs slap owner's face at 5am until human fills food dish. Curl up and sleep on the freshly laundered towels stare at the wall, play with food and get confused by dust but scratch leg; meow for can opener to feed me ignore the squirrels, you'll never catch them anyway but purrr purr littel cat, little cat purr purr toy mouse squeak roll over for when in doubt, wash. Man running from cops stops to pet cats, goes to jail meowing non stop for food soft kitty warm kitty little ball of furr. Unwrap toilet paper nap all day, yet play time, but scream at teh bath yet hide when guests come over, friends are not food but pushes butt to face. Instantly break out into full speed gallop across the house for no reason. 
    </div>
</div>
<footer>
  I am footer.
</footer>

 类似资料:
  • 渲染并控制网页 进程: 主进程​ webContents是个专门负责渲染和控制页面的EventEmitter,它也是BrowserWindow 对象的属性, 访问webContents对象的示例: 1 const {BrowserWindow} = require('electron') 2 ​ 3 let win = new BrowserWindow({width: 800, height:

  • 从采集内容中移除掉多余无用内容。 单元素采集场景 列表采集场景 很多时候我们采集回来的内容中会包含一些"杂质",如果只是想要移除或替换内容中的某些关键词,直接用字符串替换函数就可以轻松解决,但往往实际情况没这么简单,下面就是一个典型的例子: $html =<<<STR <div id="content"> <span class="tt">作者:xxx</span>

  • 我收到一条PHP警告,上面说: PHP警告:POST内容长度2290848字节超过第0行未知中2097152字节的限制, 以下是我的配置: 在 /etc/php.ini 在/etc/httpd/conf/httpd中。形态 从上面看,我的帖子最大尺寸应该是2.5米。为什么在2M(2097152字节)的下限触发此警告?

  • X1.0新增 sp_content_page($content,$pagetpl') 功能: 对文本内容进行分页处理,返回当前页的内容,和分页html 参数: $content:要处理的文本内容;里面含有百度编辑器的分页标记; $pagetpl:分页模板;默认值{first}{prev}{list}{next}{last} 返回: 类型数组 array( "content"=>"",//

  • 我有一个博客页面的文章,我试图使用CodeIgniter分页。编号和限制似乎工作正常,除了当我试图旅行到另一页时,我一直得到一个404。 奇怪的是,导致这个问题的正常罪魁祸首是正确的。baseUrl和uri_段。 我的控制器如下所示: 然后在我的模型中,我抓住柱子 我的完整URL是,然后分页显示为www.mysite。com/blog/2。 对于base\u Url,我也尝试了

  • 我尝试过使用文本溢出:省略号;这种语法但它不起作用,任何人都可以帮助我 Html 我用过的风格