Fatal编程技术网
  • html/
  • Html 随内容移动的页脚

Html 随内容移动的页脚

html css

Html 随内容移动的页脚,html,css,Html,Css,正如标题所示，我有一个页脚，我想与我的内容一起移动。基本上，我有一些文本，当浏览器被推到一个较小的宽度时，内容会在页脚下，当我希望页脚随着内容向下移动时。让它不只是停留在一个位置 我已经阅读了大部分代码并删除了不需要的位置，但是如果我尝试在.footerwrap中将其设置为底部0，它会在页面中随机浮动。希望你们能帮忙 我将链接我的html和CSS，这样你就可以有一个想法。不幸的是，该网站不是实时的，但它可能是一个简单的解决方案 <!DOCTYPE html PUBLIC "-//W3C//

正如标题所示，我有一个页脚，我想与我的内容一起移动。基本上，我有一些文本，当浏览器被推到一个较小的宽度时，内容会在页脚下，当我希望页脚随着内容向下移动时。让它不只是停留在一个位置

我已经阅读了大部分代码并删除了不需要的位置，但是如果我尝试在.footerwrap中将其设置为底部0，它会在页面中随机浮动。希望你们能帮忙

我将链接我的html和CSS，这样你就可以有一个想法。不幸的是，该网站不是实时的，但它可能是一个简单的解决方案

<!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>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
    <div class="headerwrap">
        <div class="social">
            <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
            <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
            <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
        </div><!--close social!-->
        <div class="header">
            <div class="logo">
                <img src="images/logo.png" />
            </div><!--close logo-->
        </div><!--close header!-->
                    <div class="menu">
                <ul class="menutxt">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">PORTFOLIO</a></li>
                    <li><a href="manga.html">CONTACT</a></li>                 
                </ul>
            </div><!--close menu!-->
    </div><!--close headerwrap!-->
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
    <div class="fader">
        <img class="bottom" src="images/dsas.png"/>
        <img class="top" src="images/dsa.png"/>
    </div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">      
    <div class="textwrap">
        <div class="contentspace">
        </div><!--close contentspace!-->
        <div class="content">
            <p>Specializations</p>
            <p>With various skills in branding, multi-media 
            and advertising I am able to provide fresh and inspiring solutions 
            for the task given to me. Using various programs such as:</p>
        </div><!--close content!-->
        <div class="divider">
            <img src="images/divide.png"/>
        </div><!--close divider!-->
        <div class="content2">
            <p>Why me?</p>
            <p>The work I create is reflecting something
            fresh and exciting in order to meet the clients 
            needs. About pushing for new and innovative ideas 
            and pushing for an end result of brand and product growth</p>
        </div><!--close content2!-->
        <div class="contentspace">
        </div><!--close contentspace!-->
    </div><!--close textwrap!-->
</div><!--close contentwrap!-->
<!--===================================================Footer===================================================!-->
    <div class="footerwrap">
        <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
  </div><!--close footerwrap!-->
</div><!--close wrapper!-->
</body>
</html>

通常，当我有一个复杂的网站，我试图解开它的CSS时，我会尝试使用一个简单版本的网站来降低复杂性

在中，我复制了您的contentwrap和footerwrap类，删除了一些不相关的细节（您必须向下滚动才能看到它们，因为在它们上设置了位置）。如您所见，由于
位置：relative
和
top
属性，页脚与内容重叠

在中，页脚随着内容的增长而向下移动（通过更改
height
属性来检查您自己）。为此，我删除了
位置：relative
、
top
和
z-index
属性

  • 您不需要使用
    position:relative来定位每个块和
    位置：绝对。它破坏了正常的内容流和内容的真实高度
  • 若你们想固定你们的位置并得到你们的包装的正常高度，那个么你们可以制作一个粘性的页脚（若它有固定的高度）。尽管内容高度不同，此页脚仍将位于页面的最底部

    • 有一个例子（），有一个页脚高度为142px的页面

    *{
保证金：0；
}
html，
身体{
身高：100%；
}
.换页{
最小高度：100%；
/*等于页脚高度*/
边缘底部：-142px；
}
.换页：之后{
内容：“；
显示：块；
}
.网站页脚，
.换页：之后{
高度：142px；
}
.网站页脚{
背景：橙色；
}
    
内容！
我是粘脚的。
    除了使用position:absolute和position:relative之外，有些元素的高度是固定的，无法随内容增长，.textwrap需要一个清晰的修复

    @charset“utf-8”；
/*----------------------------主体与缺省----------------------------*/
身体{
背景：#171717；
保证金：0；
字体系列：“Roboto”，无衬线；
颜色：#CCC；
} 
a{
颜色：#000；
过渡时间：300ms；
}
a:悬停{
颜色：#000；
}
a:链接{
文字装饰：无；
}
/*----------------------------主包装----------------------------*/
.包装纸{
保证金：0自动；
宽度：100%；
高度：自动；
}
/*----------------------------标题----------------------------*/
.头巾{
位置：相对位置；
背景：#171717；
-moz盒阴影：0px 10px 20px 0px#333；
-网络工具包盒阴影：0px 10px 20px 0px#333；
盒影：0px 10px 20px 0px#000；
z指数：200；
}
.标题{
位置：相对位置；
右：120px；
最小高度：180px；
身高：100%；
填充：0；
保证金：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.标志{
位置：绝对位置；
最小宽度：60px；
最高：4%；
}
.logo img{
显示：块；
左边距：自动；
右边距：自动；
宽度：100%；
}
.社会{
位置：绝对位置；
宽度：100%；
最小宽度：20px；
顶部：15px；
右：1%；
z指数：500；
}
.社会img{
浮动：对；
宽度：35px；
显示：块；
填充：0 0px 15px；
}
移动{
底部：0px；
变换：变换0.4s三次贝塞尔（0.2,1,0.44,1.2）；
}
移动：悬停{
-webkit转换：scale3d（1.1,1.1,1.1）；
转换：scale3d（1.4,1.4,1.4）；
}
/*----------------------------菜单----------------------------*/
.菜单{
位置：绝对位置；
宽度：100%；
顶部：200px；
z指数：401；
}
保险商实验室{
保证金：0自动；
填充：0 5px 0；
列表样式类型：无；
}
李{
显示：内联；
列表样式：无；
填充：1%；
过渡：所有300毫秒；
}
李阿{
颜色：#CCC；
过渡时间：300ms；
}
李娜：停下来{
颜色：#900；
}
MenuText先生{
文本对齐：居中；
字体系列：“Raleway”，无衬线；
字体大小：1.8vw；
字体大小：400；
z指数：300；
}
/*----------------------------图像衰减器----------------------------*/
.推子{
宽度：100%；
z指数：1；
}
.音量控制器{
位置：绝对位置；
宽度：100%；
高度：500px；
最大高度：1000px；
最小高度：200px；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
@关键帧faderFadeInOut{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}
.音量控制器img.top{
动画名称：faderFadeInOut；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画持续时间：4s；
动画方向：交替*/
}
/*----------------------------内容----------------------------*/
.contentwrap{
/*职位：相对*/
页边距顶部：500px；/*页边距顶部而不是顶部*/
宽度：100%；
z指数：500；
背景：#171717；
/*高度：290px*/
-moz盒阴影：0px-10px 20px 0px#000；
-网络工具包盒阴影：0px-10px 20px 0px#000；
盒影：0px-10px 10px 0px#000；
}
.textwrap{
位置：相对位置；
宽度：100%；
/*顶部：40px*/
填充顶部：40px；/*已添加*/
}
/*clearfix*/
.textwrap:之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.内容，
.分隔器，
.2，
.内容空间{
文本对齐：居中

    @charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
    background:#171717;
    margin:0;
    font-family: 'Roboto', sans-serif;
    color:#CCC;
} 
a{
    color:#000;
    transition:300ms;
}
a:hover {
    color:#000;
}
a:link {
    text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
    margin: 0 auto;
    width:100%;
    height:auto;    
}
/*---------------------------- Header ----------------------------*/
.headerwrap{
    position:relative;
    background:#171717;
    -moz-box-shadow: 0px 10px 20px 0px #333 ;
    -webkit-box-shadow: 0px 10px 20px 0px #333 ;
    box-shadow: 0px 10px 20px 0px #000;
    z-index:200;
}
.header{
    position:relative;
    right:120px;
    min-height:180px;
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo{
    position: absolute;
    min-width:60px; 
    top:4%;
}
.logo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.social{
    position: absolute;
    width:100%;
    min-width:20px; 
    top:15px;
    right:1%;
    z-index:500;    
}
.social img{
    float:right;
    width:35px;
    display: block;
    padding:0 0 0px 15px;
}
img.move {
    bottom:0px;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.4, 1.4, 1.4);    
}
/*---------------------------- Menu ----------------------------*/
.menu{
    position:absolute;
    width:100%;
    top:200px;
    z-index:401;
}
ul {
    margin: 0 auto;
    padding:0 0 5px 0;
    list-style-type: none;
}
li{
    display: inline;
    list-style:none;
    padding:1%;
    transition: all 300ms;
}
li a{
    color:#CCC;
    transition:300ms;
}
li a:hover {
    color:#900;
}
.menutxt{
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size:1.8vw;
    font-weight:400;
    z-index:300;
}
/*---------------------------- Image Fader ----------------------------*/
.fader {
    width:100%;
    z-index:1;
}
.fader img {
  position:absolute;
  width:100%;
  height:500px;
  max-height:1000px;
  min-height:200px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
  @keyframes faderFadeInOut {
  0% {
  opacity:1;
    }
    45% {
    opacity:1;
    }
    55% {
    opacity:0;
    }
    100% {
    opacity:0;
    }
}
.fader img.top {
animation-name: faderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;*/
}
/*---------------------------- Content ----------------------------*/
.contentwrap{   
    position:relative;
    top:500px;
    width:100%;
    z-index:500;
    background:#171717;
    height:290px;
    min-height:212px;   
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
.textwrap{
    position:relative;
    width:100%;
    top:40px;
    height:190px;
}
.content,
.divider,
.content2 {
    text-align:center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.divider{
    height:200px;
    width: 24%;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0;
}
.divider img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.content,
.content2 {
    height:200px;
    width: 15%;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0;
}
.contentspace{
    width: 20%;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap{
    position:relative;
    top:460px;
    width:100%;
    z-index:501;
    clear:both;
}
.foottxt{
    width:100%;
    height:26px;    
    text-align: center;
    background:#333;
    font-family: 'Roboto', sans-serif;
    padding-top:15px;
    font-size:0.5vw;
    color:#FFFFFF;
    font-weight:200;
}