html - 随内容移动的页脚

标签 html css

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

我已经检查了我的大部分代码并删除了不需要的定位，但如果我尝试将其设置为 .footerwrap 的底部 0，它会随机 float 在页面中的某个位置。希望大家帮帮忙。

我将链接我的 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;
}

最佳答案

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

@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 */
    margin-top:500px; /* margin-top instead of top */
    width:100%;
    z-index:500;
    background:#171717;
    /* height: 290px */
    -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 */
    padding-top:40px; /* added */
}

/* clearfix */
.textwrap:after {
    content: "";
    display: table;
    clear: both;
}

.content,
.divider,
.content2,
.contentspace {
    text-align:center;
    float: left;
}
.divider{
    /* height: 200px */
    width: 24%;
    float: left;
    /* display:inline-block; */
    margin: 0 1% 1% 0;
}
.divider img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.content,
.content2 {
    /*  height:200px; */
    width: 15%;
    float: left;
    margin: 0 1% 1% 0;
}
.contentspace{
    width: 20%;
    /* display:inline-block; */
    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:15px 0;
    font-size:0.5em; /* typo vw */
    color:#FFFFFF;
    font-weight:200;
    margin: 0;
    box-sizing: border-box;
}
<!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="test.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>

关于html - 随内容移动的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31235643/

上一篇：javascript - 在查找内容的 div 中添加文本

下一篇：php - Wordpress 仅在主页中缩小 html

相关文章：

javascript - 如何使用 Ckeditor 保存带有 div 和 html 属性的 HTML

javascript - 使用 $this 和 .find 在另一个 div 中查找一个 div

javascript - 使用 TinyMCE 在图像中添加内联 CSS

php - 我怎样才能保持 Mozilla Firefox 上的图像比例？

javascript - IE11 在 AJS 1.3 中闪烁，需要快速修复

jquery - HTML 切换开关状态

javascript - 如何在单击图像时勾选复选框

javascript - 简单的js框架，DOM。 (模块样式，如 jQuery)添加方法的问题

javascript - 2019年如何检测触摸设备？

css 表阴影外面不显示

©2024 IT工具网  联系我们