如何让页脚停留在网页的底部?

css html footer sticky-footer

151133 观看

25回复

303921 作者的声誉

我有一个简单的2列布局,页脚可以清除标记中的左右div。我的问题是我无法在所有浏览器中让页脚停留在页面底部。如果内容向下推动页脚,它就可以工作,但情况并非总是如此。

更新:

它在Firefox中无法正常工作。当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色。不幸的是,这是页面的默认状态。

作者: Bill the Lizard 的来源 发布者: 2008 年 9 月 3 日

回应 (25)


193

17885 作者的声誉

决定

要获得粘性页脚:

  1. 有一个<div>class="wrapper"你的内容。

  2. 收盘</div>的的wrapper地方 <div class="push"></div>

  3. 收盘</div>的的wrapper地方 <div class="footer"></div>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
作者: Staale 发布者: 03.09.2008 06:55

1

65555 作者的声誉

尝试在内容和侧边栏周围放置一个容器div(带溢出:auto)。

如果这不起作用,您是否有任何屏幕截图或示例链接页脚未正确显示?

作者: John Sheehan 发布者: 03.09.2008 06:55

1

10835 作者的声誉

一种解决方案是设置盒子的最小高度。不幸的是,它似乎没有得到IE的良好支持(惊喜)。

作者: Grey Panther 发布者: 03.09.2008 06:55

11

7735 作者的声誉

设置为的CSS #footer

position: absolute;
bottom: 0;

然后,您需要在您的底部添加一个padding或以及匹配高度或重叠时,将覆盖它们。margin#sidebar#content#footer#footer

另外,如果我没记错的话,IE6的bottom: 0CSS 有问题。您可能必须使用IE6的JS解决方案(如果您关心的是IE6)。

作者: Raleigh Buckner 发布者: 03.09.2008 07:01

30

69391 作者的声誉

您可以使用position: absolute以下内容将页脚放在页面底部,但请确保您的2列具有适当的值,margin-bottom以便它们永远不会被页脚遮挡。

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}
作者: Jimmy 发布者: 03.09.2008 07:02

1

1337 作者的声誉

这些纯css解决方案都没有适用于动态调整内容大小(至少在firefox和Safari上),例如,如果你在容器div上设置了一个背景,那么页面然后在div里面调整大小(添加几行)表,桌子可以伸出风格区域的底部,也就是说,你可以将一半的桌子放在白色的黑色主题上,一半的桌子完全是白色的,因为字体颜色和背景颜色都是白色的。它与themeroller页面基本上是不可修复的。

嵌套的div多列布局是一个丑陋的黑客和100%最小高度的身体/容器div粘贴页脚是一个丑陋的黑客。

唯一一个适用于我尝试的所有浏览器的无脚本解决方案:一个更简单/更短的表,其中包含thead(用于标题)/ tfoot(用于页脚)/ tbody(td用于任意数量的列)和100%高度。但是这已经感知到语义和SEO的缺点(tfoot必须出现在tbody之前。尽管ARIA角色可能有助于体面的搜索引擎)。

作者: obecalp 发布者: 28.02.2011 04:35

15

1840 作者的声誉

这是一个jQuery的解决方案,就像一个魅力。它检查窗口的高度是否大于身体的高度。如果是,那么它会更改页脚的页边距以进行补偿。在Firefox,Chrome,Safari和Opera中测试过。

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

如果你的页脚已经有一个margin-top(例如50像素),你需要更改最后一部分:

css( 'margin-top', height_diff + 50 )
作者: Sophivorus 发布者: 18.02.2012 11:36

2

20603 作者的声誉

使用绝对定位和z-index可以使用以下步骤以任何分辨率创建粘性页脚div:

  • 创建一个具有position: absolute; bottom: 0;所需高度的页脚div
  • 设置页脚的填充以在内容底部和窗口底部之间添加空格
  • 创建一个div用于包装正文内容的容器position: relative; min-height: 100%;
  • 将底部填充添加到主内容div,该内容等于页脚的高度和填充
  • 如果页脚被剪裁z-index,则将页脚设置为大于容器div

这是一个例子:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

作者: Paul Sweatte 发布者: 26.08.2012 12:47

74

86357 作者的声誉

使用CSS vh单位!

关于粘性页脚的最明显和非黑客的方法可能是使用新的css视口单元

以下面的简单标记为例:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

如果标题高80px且页脚高40px,那么我们可以在内容div上使用单个规则制作粘性页脚:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

这意味着:让内容div的高度至少为视口高度的100%减去页眉和页脚的组合高度。

而已。

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

...这里是相同的代码如何与内容div中的大量内容一起使用:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

注意:

1)页眉和页脚的高度必须是已知的

2)旧版本的IE(IE8-)和Android(4.4-)不支持视口单元。(caniuse

3)曾几何时,webkit在计算规则中的视口单元出现问题。这确实已经修复(见这里)所以那里没有问题。但是,如果您因某些原因希望避免使用计算机,则可以使用负边距和使用框大小填充来解决这个问题 -

像这样:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

作者: Danield 发布者: 28.09.2014 10:02

1

116 作者的声誉

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果您正在寻找在页面底部对齐的响应页脚,这应该可以解决问题,该页脚始终保持视口高度的80%的上边距。

作者: Ajith 发布者: 21.12.2014 06:23

0

102 作者的声誉

Multiple people have put the answer to this simple problem up here, but I have one thing to add, considering how frustrated I was until I figured out what I was doing wrong.

As mentioned the most straightforward way to do this is like so..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

However the property not mentioned in posts, presumably because it is usually default, is the position: static on the body tag. Position relative will not work!

My wordpress theme had overridden the default body display and it confused me for an obnoxiously long time.

作者: Kyle Zimmer 发布者: 21.07.2015 12:55

47

3253 作者的声誉

粘性页脚 display: flex

解决方案的灵感来自菲利普沃尔顿的粘性页脚

说明

此解决方案仅适用于

  • 铬≥21.0
  • Firefox≥20.0
  • InternetExplorer≥10
  • Safari≥6.1

它基于flex显示,利用flex-grow属性,允许元素在高度宽度(当设置为或分别设置)时增长,以占据容器中的额外空间。flow-directioncolumnrow

我们要充分利用也是vh单元,其中1vh定义为

视口高度的1/100

因此,100vh它的高度是一种简洁的方式,可以告诉元素跨越整个视口的高度。

这就是您构建网页的方式:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

为了让页脚粘到页面底部,您希望主体和页脚之间的空间增长到将页脚推到页面底部所需的数量。

因此我们的布局变为:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

履行

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

你可以在JSFiddle上玩它。

Safari怪癖

请注意,Safari flex-shrink属性实现缺陷,允许项目缩小超过显示内容所需的最小高度。要解决此问题,您必须将flex-shrink属性显式设置为0,.contentfooter在上面的示例中:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }
作者: gcedo 发布者: 08.12.2015 01:23

0

7635 作者的声誉

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom()

或者像我一样使用jQuery,并将页脚高度设置为auto或者fix,无论你喜欢什么,它都会起作用。这个插件使用jQuery选择器,所以为了使它工作,你必须将jQuery库包含到你的文件中。

以下是运行插件的方法。导入jQuery,复制这个自定义jQuery插件的代码,并在导入jQuery后导入它!它非常简单和基本,但很重要。

当你这样做时,你所要做的就是运行以下代码:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

没有必要将它放在文档就绪事件中。它会运行良好。它将在页面加载和窗口调整大小时重新计算页脚的位置。

这是插件的代码,您不必理解。只知道如何实现它。它为你完成了这项工作。但是,如果您想知道它是如何工作的,只需查看代码即可。我给你留言。

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

作者: DevWL 发布者: 16.01.2016 03:14

1

337 作者的声誉

对于这个问题,我看到的许多答案都很笨重,难以实现和低效,所以我想我会对它进行一次拍摄并提出我自己的解决方案,这只是一点点css和html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

这可以通过设置页脚的高度,然后使用css calc来计算页面最小高度,页脚仍然在底部,希望这有助于一些人:)

作者: jjr2000 发布者: 10.02.2016 09:04

0

20 作者的声誉

An old thread I know, but if you are looking for a responsive solution, this jQuery addition will help:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Full guide can be found here: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

作者: user1235285 发布者: 29.08.2016 06:08

0

1619 作者的声誉

I have created a very simple library https://github.com/ravinderpayal/FooterJS

It is very simple in use. After including library, just call this line of code.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Footers can be dynamically changed by recalling above function with different parameter/id.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Note:- You haven't to alter or add any CSS. Library is dynamic which implies that even if screen is resized after loading page it will reset the position of footer. I have created this library, because CSS solves the problem for a while but when size of display changes significantly,from desktop to tablet or vice versa, they either overlap the content or they no longer remains sticky.

Another solution is CSS Media Queries, but you have to manually write different CSS styles for different size of screens while this library does its work automatically and is supported by all basic JavaScript supporting browser.

Edit CSS solution:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Now, if the height of display is more than your content length, we will make footer fixed to bottom and if not, it will automatically appear in very end of display as you need to scroll to view this.

并且,它似乎比JavaScript /库更好的解决方案。

作者: Ravinder Payal 发布者: 12.09.2016 11:43

0

118 作者的声誉

我之前在这个页面上建议的解决方案没有任何运气,但最后,这个小技巧起作用了。我将其作为另一种可能的解决方案。

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
作者: Laughing Horse 发布者: 21.06.2017 05:09

0

6460 作者的声誉

Flexbox解决方案

Flex布局是自然页眉和页脚高度的首选。这个灵活的解决方案在现代浏览器中进行了测试,实际上在IE11中工作。

见JS小提琴

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}
作者: Reggie Pinkham 发布者: 27.06.2017 02:18

1

116 作者的声誉

我有时会对此感到挣扎,而且我总是发现所有这些div的解决方案都是一个混乱的解决方案。我只是搞砸了一下,我个人发现这是有效的,它肯定是最简单的方法之一:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

我喜欢这个是不需要应用额外的HTML。您可以简单地添加此CSS,然后随时编写HTML

作者: Daniel Alsaker 发布者: 10.07.2017 09:16

0

1372 作者的声誉

对我来说,最好的显示方式(页脚)是坚持底部但不是一直覆盖内容:

#my_footer {
    position: static
    fixed; bottom: 0
}
作者: juan Isaza 发布者: 25.11.2017 06:34

4

100665 作者的声誉

@gcedo类似的解决方案,但无需添加中间内容以推动页脚。我们可以简单地添加margin-top:auto到页脚,它将被推到页面的底部,无论他的高度或上面的内容的高度。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

作者: Temani Afif 发布者: 04.12.2017 07:47

0

313 作者的声誉

灵活的解决方案对我有用,只要使页脚粘,但不幸的是改变主体使用flex布局使我们的一些页面布局发生了变化,而不是更好。最终对我有用的是:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

我从ctf0的回复中得到了这个回复:https: //css-tricks.com/couple-takes-sticky-footer/

作者: Roger 发布者: 30.08.2018 11:46

1

9180 作者的声誉

由于电网的解决方案尚未提交,这里是,只有两个声明父元素,如果我们把height: 100%margin: 0理所当然:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

作者: VXp 发布者: 21.09.2018 09:27

0

863 作者的声誉

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

作者: antelove 发布者: 25.12.2018 03:17

0

1597 作者的声誉

诀窍是在将底部设置为0 时固定页脚的位置。最简单的解决方案是:

  footer {
        ...
        width: 100%;
        position: fixed;
        bottom: 0;
    }

看这里这个完整的简单例子:

        body {
            background-color: #ccc;
            margin: 0;
        }

        main {
            width: 85%;
            margin: auto;
            background-color: bisque;
        }

        main h1 {
            text-align: center;
        }

        article p {
            padding: 5px 50px 5px 50px;
        }

        footer {
            background-color: black;
            width: 100%;
            height: 50px;
            text-align: center;
            position: fixed;
            bottom: 0;
        }

        footer p {
            color: white;
            font-size: 20px;
        }
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <main>
        <section>
            <article>
                <header>
                    <h1>Know me better!</h1>
                </header>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit quis et minima similique accusamus
                    est error eos culpa quos natus maxime, dolorem quam voluptatibus quo quod velit neque iste non.
                    Consequatur provident pariatur, similique aut velit libero quasi, laudantium magnam, eos laborum
                    expedita quos voluptas impedit labore veniam. Neque maiores aperiam soluta quis nobis ipsum hic
                    tempore porro optio ad.
                </p>
            </article>
        </section>
    </main>
    <footer>
        <p>Copyrighting 2019.</p>
    </footer>
</body>

</html>

作者: DINA TAKLIT 发布者: 28.08.2019 01:28
32x32