随内容移动的页脚

Question

正如标题所示,我有一个页脚,我想用我的内容移动.基本上,我有一些文本,当浏览器被推到较小的宽度时,内容会在页脚下面,当我希望页脚向下移动内容时.让它不仅仅是保持一个位置.

我已经完成了大部分代码并删除了不需要的定位,但是如果我尝试在.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>

---

@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;
}

Answer 1

除了使用position:absolute和position:relative之外，一些元素具有固定的高度并且无法随着内容而增长，并且.textwrap需要一个clearfix。

\n\n

\r\n

\r\n

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

\r\n

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r\n<html xmlns="http://www.w3.org/1999/xhtml">\r\n    <head>\r\n        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r\n        <title>Home</title>\r\n        <!--===================================================css links===================================================!-->\r\n        <link href=\'http://fonts.googleapis.com/css?family=Raleway:600,500,400,200\' rel=\'stylesheet\' type=\'text/css\'> \r\n        <link href=\'http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300\' rel=\'stylesheet\' type=\'text/css\'>\r\n        <link href="test.css" rel="stylesheet" type="text/css" />\r\n    </head>\r\n    <body>\r\n        <!--===================================================Header===================================================!-->\r\n        <div class="wrapper">\r\n            <div class="headerwrap">\r\n                <div class="social">\r\n                    <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>\r\n                    <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>\r\n                    <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>\r\n                </div><!--close social!-->\r\n                <div class="header">\r\n                    <div class="logo">\r\n                        <img src="images/logo.png" />\r\n                    </div><!--close logo-->\r\n                </div><!--close header!-->\r\n                <div class="menu">\r\n                    <ul class="menutxt">\r\n                        <li><a href="index.html">HOME</a></li>\r\n                        <li><a href="about.html">PORTFOLIO</a></li>\r\n                        <li><a href="manga.html">CONTACT</a></li>                 \r\n                    </ul>\r\n                </div><!--close menu!-->\r\n            </div><!--close headerwrap!-->\r\n            <!--===================================================Fader===================================================!-->\r\n            <div class="fadewrapper">\r\n                <div class="fader">\r\n                    <img class="bottom" src="images/dsas.png"/>\r\n                    <img class="top" src="images/dsa.png"/>\r\n                </div>\r\n            </div>\r\n            <!--===================================================Content===================================================!-->\r\n            <div class="contentwrap">      \r\n                <div class="textwrap">\r\n                    \r\n                    <div class="contentspace">\r\n                    </div><!--close contentspace!-->\r\n                    <div class="content">\r\n                        <p>Specializations</p>\r\n                        <p>With various skills in branding, multi-media \r\n                            and advertising I am able to provide fresh and inspiring solutions \r\n                            for the task given to me. Using various programs such as:</p>\r\n                    </div><!--close content!-->\r\n                    <div class="divider">\r\n                        <img src="images/divide.png"/>\r\n                    </div><!--close divider!-->\r\n                    <div class="content2">\r\n                        <p>Why me?</p>\r\n                        <p>The work I create is reflecting something\r\n                            fresh and exciting in order to meet the clients \r\n                            needs. About pushing for new and innovative ideas \r\n                            and pushing for an end result of brand and product growth</p>\r\n                    </div><!--close content2!-->\r\n                    <div class="contentspace">\r\n                    </div><!--close contentspace!-->\r\n                    \r\n                   \r\n                </div><!--close textwrap!-->\r\n                     \r\n            </div><!--close contentwrap!-->\r\n            <!--===================================================Footer===================================================!-->\r\n            <div class="footerwrap">\r\n                <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved \xc2\xa92015</p>\r\n            </div><!--close footerwrap!-->\r\n        </div><!--close wrapper!-->\r\n    </body>\r\n</html>

\r\n

\r\n

\r\n

\n