Html Can'；不要让页脚粘在页面底部_Html_Css

Html Can'；不要让页脚粘在页面底部

html css

Html Can'；不要让页脚粘在页面底部,html,css,Html,Css,我已经试了几个小时了，在stackoverflow和其他网站上看了几个关于它的主题。但我似乎无法解决它正文{ 背景色：#1a3041；背景图像：径向梯度（#757580，#1a3041）；背景重复：无重复；背景尺寸：封面； } html{高度：100%} .标题{ 边框样式：实心；边框宽度：2倍；边框颜色：#fa6800；背景色：#717171；字体系列：开放式SAN；颜色：#C1C1；填充：0px；保证金：5px；边缘顶部：20px；盒影：10px 10px 5px

我已经试了几个小时了，在stackoverflow和其他网站上看了几个关于它的主题。但我似乎无法解决它

正文{
背景色：#1a3041；
背景图像：径向梯度（#757580，#1a3041）；
背景重复：无重复；
背景尺寸：封面；
}
html{高度：100%}
.标题{
边框样式：实心；
边框宽度：2倍；
边框颜色：#fa6800；
背景色：#717171；
字体系列：开放式SAN；
颜色：#C1C1；
填充：0px；
保证金：5px；
边缘顶部：20px；
盒影：10px 10px 5px rgba（0,0,0,0.5）；
}
.标题h1{
显示：内联；
字体大小：40px；
左侧填充：10px；
}
#口号{
显示：内联块；
字体大小：20px；
字体：斜体；
浮动：中心；
线高：正常；
垂直对齐：居中；
右边填充：10px；
边际上限：0px；
}
#菜单{
显示：内联块；
字体大小：25px；
字体大小：粗体；
浮动：对；
线高：正常；
垂直对齐：底部对齐；
边缘顶部：10px；
}
梅因先生{
位置：绝对位置；
背景色：#cdd1d5；
填充：10px；
利润率：25px；
边缘顶部：30px；
边缘底部：10px；
顶部：70像素；
最小高度：计算（100%-130px-35px）；
左：0；
右：0；
盒影：7px 7px 5px rgba（0,0,0,0.5）；
}
.页脚{
位置：绝对位置；
底部：0px；
左：5px；
右：5px；
高度：30px；
溢出：隐藏；
边框样式：实心；
边框底部：无；
边框宽度：2倍；
边框颜色：#fa6800；
背景色：#333333；
左侧填充：10px；
垂直对齐：顶部；
字体大小：12px；
字体系列：开放式SAN；
颜色：#C1C1；
盒影：10px 10px 5px rgba（0,0,0,0.5）；
}
a:链接{
文字装饰：无；
}
a:link.title，a:visted.title{
颜色：#C1C1；
}
a:link.menu，a:visted.menu，a:link.current，a:visted.current{
颜色：#C1C1；
文字装饰：无；
填充：10px；
}
a:link.lastmenu，a:visted.lastmenu，a:link.lastcurrent，a:visted.lastcurrent{
颜色：#C1C1；
文字装饰：无；
填充：10px；
右边填充：20px；
}
链接：hover.menu{
背景色：#fa6800；
填充：10px；
}
链接：hover.last菜单{
背景色：#fa6800；
填充：10px；
右边填充：20px；
}
a:link.current{
背景色：#333333；
填充：10px；
}
a:link.lastcurrent{
背景色：#333333；
填充：10px；
右边填充：20px；
}


航空公司项目|主页
让你的梦想飞翔
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
页脚

在css中的

.footer

下，将

位置：绝对

更改为

位置：固定

示例：

在css中的

.footer

下，将

位置：绝对

更改为

位置：固定

示例：

为了实现这一点，您需要更改html。您需要将页脚放在最后一个div的内部，请参见下文

   <!DOCTYPE html>
    <html lang="en-US">
    <head>
         <meta charset="UTF-8"> 
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>The Airline Project | Home</title>
         <link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
         <link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
         <link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
    </head>
    <body>
         <div class="header">
              <h1><a class="title" href="home.html">The Airline Project</a></h1>
              <span id="slogan">Let your dreams fly</span>
              <span id="menu">
                   <a class="menu" href="Home.html">Home</a>
                   <a class="current" href="TheGame.html">The Game</a>
                   <a class="menu" href="TutandTips.html">Tutorials and Tips</a>
                   <a class="menu" href="FAQ.html">FAQ</a>
                   <a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
                   <a class="lastmenu" href="Aboutus.html">About Us</a>
              </span>

    </div>
    <div class="main">
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <div class="footer">
             <p>footer</p>
         </div>
    </div>



    </body>


航空公司项目|主页
让你的梦想飞翔
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
页脚

但是，由于格式需要更改，这仍然无法100%工作。我建议看一下引导程序。这将使这些类型的布局更容易，同时它已经进行了移动优化

希望这有帮助

为了实现这一点，您需要更改html。您需要将页脚放在最后一个div的内部，请参见下文

   <!DOCTYPE html>
    <html lang="en-US">
    <head>
         <meta charset="UTF-8"> 
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>The Airline Project | Home</title>
         <link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
         <link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
         <link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
    </head>
    <body>
         <div class="header">
              <h1><a class="title" href="home.html">The Airline Project</a></h1>
              <span id="slogan">Let your dreams fly</span>
              <span id="menu">
                   <a class="menu" href="Home.html">Home</a>
                   <a class="current" href="TheGame.html">The Game</a>
                   <a class="menu" href="TutandTips.html">Tutorials and Tips</a>
                   <a class="menu" href="FAQ.html">FAQ</a>
                   <a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
                   <a class="lastmenu" href="Aboutus.html">About Us</a>
              </span>

    </div>
    <div class="main">
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <div class="footer">
             <p>footer</p>
         </div>
    </div>



    </body>


航空公司项目|主页
让你的梦想飞翔
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
页脚

但是，由于格式需要更改，这仍然无法100%工作。我建议看一下引导程序。这将使这些类型的布局更容易，同时它已经进行了移动优化

希望这有帮助

只需从.menu和.footer类样式中删除绝对位置即可。您将获得所需的结果。：）

正文{
背景色：#1a3041；
背景图像：径向梯度（#757580，#1a3041）；
背景重复：无重复；
背景尺寸：封面；
}
html{高度：100%}
.标题{
边框样式：实心；
边框宽度：2倍；
边框颜色：#fa6800；
背景色：#717171；
字体系列：开放式SAN；
颜色：#C1C1；
填充：0px；
保证金：5px；
边缘顶部：20px；
盒影：10px 10px 5px rgba（0,0,0,0.5）；
}
.标题h1{
显示：内联；
字体大小：40px；
左侧填充：10px；
}
#口号{
显示：内联块；
字体大小：20px；
字体：斜体；
浮动：中心；
线高：正常；
垂直对齐：居中；
右边填充：10px；
边际上限：0px；
}
#菜单{
显示：内联块；
字体大小：25px；
字体大小：粗体；
浮动：对；
线高：正常；
ve