个人中心
gpt4 book ai didi

css - 如何让页面内容拉伸(stretch)并将页脚粘贴到页面底部？

转载 作者：太空宇宙 更新时间：2023-11-03 20:02:00 26 4
gpt4 key购买 nike

我一直在努力让这个我该死的布局工作这么久，但它非常令人沮丧。我是 CSS 的新手，所以请放轻松，但我已经查阅了很多关于粘性页脚和拉伸(stretch)内容等的文章，但我仍然无法让它工作。最小高度对我没有任何帮助!

Here is what i want my site to look like when it doesn't have enough content to fill a page.

And this is what i want it to look like when the content makes you scroll.

这是html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="pageHeader"> 
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>

<div id="navigation">
    <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./blog.html">Blog</a></li>
        <li><a href="./projects.html">Projects</a></li>
        <li><a href="./about.html">About Me</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ul>
</div>


<div id="main">

<div>
<h2>What the hell?</h2>
    <p>
    This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
    </p>
</div>

<div>
<h2> Why? </h2>
    <p> As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
    </p>
</div>

</div>

<div id="pageFooter">
    <p> This is a footer
    </p>
</div>

</div>
</body>
</html>

这是 CSS:

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Global Styles */

html{
    background: url(./images/sway.jpg);
    background-attachment: fixed;
    background-repeat::no-repeat;
}

body {
    width: 80%;
    margin: 0 auto; 
}
/* pageHeader Styles */

#pageHeader{
    height: 100px;
    background:#999;
}

#pageHeader h1 {
    padding-left: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 3.5em;
    color:#F93;
}

#pageHeader p{
    padding-left: 40px;
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    color: white;
}

/* navigation Styles */

#navigation{
    float:left;
    width:100%;
    background: #0CF;
    overflow: hidden;
    position: relative;
}

#navigation ul{

}

#navigation li{
    float: left;
    margin: 0 20px;
    font-size: 1.5em;
}

#navigation li a:link {color:#F60;}    /* unvisited link */
#navigation li a:visited {color:##89ABFC;} /* visited link */
#navigation li a:hover {color:#3FF;}   /* mouse over link */
#navigation li a:active {color:#009;}  /* selected link */

/* main Styles */

#main{
    width: 80%;
    margin: 0 auto;
    border: 2px solid black;
    background: #999;
    color: #FFF;
}

/* pageFooter Styles */

#pageFooter{
    height: 100px;
    background:#999;
}

#pageFooter h1 {
    padding-left: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 3.5em;
    color:#F93;
}

#pageFooter p{
    font-family: "Times New Roman", Times, serif;
    font-size: 2em;
    color: white;
}

我该怎么做才能达到这种效果？

最佳答案

您正在寻找的是“粘性页脚”。

  • 旧的纯 CSS 方法要求您知道页脚的确切高度。我能够通过快速谷歌搜索找到的最佳解决方案是 Ryan Fait's Sticky Footer . Ryan 的教程通过将 100% 的高度放在包装元素(包含除页脚之外的内容)上来工作。这个 100% 的高度使您的内容将页脚推到窗口底部，然后页脚使用负边距蠕动回到可见区域(这就是为什么您需要知道页脚的高度......负边距必须与页脚元素的高度相同)。还有一些额外的部分可以让它在所有浏览器中可靠地工作(比如 <div class="push"></div> )，但这基本上就是正在发生的事情。

  • 较新的纯 CSS 解决方案需要使用 display: table; (IE7 不支持)，但允许可变高度的页脚(参见 Sticky CSS footers: The flexible way )。这可能是我推荐的方法。

第二篇文章的作者提到可以使用 Javascript 添加 IE7 支持，但没有编写实际的 Javascript。在回答这个问题时，StatCounter将 IE7 列为具有大约 1.28% 的市场渗透率。我会留给您来确定 IE7 支持是否重要，但如果可以的话，我想加 0.02 美元 :-p 首先，所有 IE7 用户都有升级到 IE8 的途径，拒绝更新的用户是只会让 Web 开发人员的生活变得更加困难(IE7 到 IE8 为许多重要的 CSS2 选择器提供了可能性，并修复了许多烦人的 float 问题并使 display: table; 成为可能)。除了让 Web 开发人员的生活更加艰难之外，他们还让自己容易受到大量浏览器黑客的攻击，这些攻击会危及他们的计算机，使他们很容易成为寻求扩大僵尸大军的黑客的目标(这使得 security more difficult for everyone else )。二、Do websites need to look exactly the same in every browser? (当然，答案是否定的)只要在浏览器窗口底部有一个页脚可以被认为是一种渐进式增强，您就不必担心。

话虽这么说......我更新了代码所以它应该在 IE7 中工作:-p 请看一下 jsfiddle并告诉我它是如何工作的。

关于css - 如何让页面内容拉伸(stretch)并将页脚粘贴到页面底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12119755/

26 4 0
文章推荐： c# - 在字符串中查找信用卡
文章推荐： python - 将列添加到常规数据帧中的日期时间索引数据帧
文章推荐： matlab - 绘制大量数据时如何减小打印的 eps 的大小
文章推荐： C# 使用简单列表过滤对象列表
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com