将容器移到页脚上方

问题描述 投票:0回答:4

我目前是社区的新手,并希望得到一些我为我的朋友创建的HTML网站的帮助。基本上我是创建一个简单的网站,但我有一些问题,文本不会超过页脚。我检查代码并试图弄清楚如何解决这个问题,但我无法这样做。我的问题是:有人可以帮我把文字放在页脚上面吗?请告诉我 !

body {
    margin: 0 auto; 
    min-height: 100%; 
    background-color: #111;
}
h1 {
    color: #fff;
    position: relative;

}
h2 {
    color: #fff; 
    text-decoration: none; 
    letter-spacing: 2px;
}
.x {
    color: #ef3937; 
    text-decoration: none; 
    letter-spacing: 2px;
}
.container {
    height: auto; 
    width: 100%;
}
/*-------------------------------HEADER--------------------------------*/
.headercontainer {
    height: auto; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    top:0px; 
    background-color: #111;
}
.header {
    width: 95%; 
    margin-left: auto; 
    margin-right: auto;
}
.headerleft {}
.headercenter {
    width: 100%; 
    height: 100%; 
    color:#f2f2f2;
}
.logo {
    max-width: 200px; 
    margin-top: 20px;
}
.headerright {}
/*-----------------------------END HEADER------------------------------*/


/*------------------------------CONTENT--------------------------------*/
.contentcontainer {
    Position: absolute; 
    height: auto; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 0%; 
    background-color:#111;
}
.content {
    width: 75%; 
    margin-left: auto; 
    margin-right: auto;
}
.contenleft {}
.contentcenter {
    text-align: center;
    position: relative;
}
.contentright {}
/*-----------------------------END CONTENT-----------------------------*/


/*-------------------------------FOOTER--------------------------------*/
.clearfooter {}

.footercontainer { 
    height: auto; 
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    background-color: #111; 
    bottom: 20;
}
.footer {
    width: 75%; 
    margin-left: auto; 
    margin-right: auto;
}
.footerleft {}
.footercenter {
    text-align: center; 
    font-size: 8px; 
    font-weight: normal; 
    font-family: 'Economica'; 
    font-weight: 100;
    letter-spacing: 1px;
}
.footerright {}
/*-----------------------------END FOOTER------------------------------*/

/*------------------------------ALGEMEEN-------------------------------*/
a {text-decoration: none; color: #fff;}
a:hover{text-decoration: underline;}

@font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}


@font-face {
font-family: 'Champagne & Limousines Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}


@font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}


@font-face {
font-family: 'Champagne & Limousines Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    <meta charset="utf-8">
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
	<title>Froluv</title>

	<meta name="Froluv." content="PSD to HTML5+CSS3 conversion.">
	<meta name="Froluv" content="PSD, HTML5, CSS3">
	<meta name="author" content="Vivaco">

    
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" type="text/css" href="StyleCSS.css">
</head>
<body>

<div class="container">
    
<!-------------------------------------------------------------------------HEADER------------------------------------------------------------------------->
    <div class="headercontainer">
        <div class="header">
            <div class="headerleft">
            </div>
            
            <div class="headercenter">
                <div class="logocontainer"> 
                    <img src="" class="logo"> <!--insert logo here-->
                </div>
            </div>
            
            <div class="headerright">
            </div>
        </div>
    </div>
<!-----------------------------------------------------------------------END HEADER----------------------------------------------------------------------->
<!-------------------------------------------------------------------------CONTENT----------------------------------------------------------------------->  
    <div class="contentcontainer">
        <div class="content">   
            <div class="contentleft">
            </div>
            
            <div class="contentcenter">
                <h1 style="font-family:'Champagne &amp; Limousines';font-weight:normal;font-size:42px">“Wij organiseren events, kom je <u><b><a href="">dansen</a></b></u>?”</h1> 
                <!--Insert ticket link here-->
            </div>            
                
            
            <div class="contentright">
            </div>
        </div>
    </div>
<!-----------------------------------------------------------------------END CONTENT-------------------------------------------------------------------->
<!-----------------------------------------------------------------------FOOTER------------------------------------------------------------------------->


            
    <div class="footercontainer">        
            <div class="footer">
                    
                <div class="footerleft">
                </div>
                    
                <div class="footercenter">
                    <h2>
                        <a href="">FACEBOOK</a> <span class="x">x</span> <a href="">INSTAGRAM</a> <span class="x">x</span> <a href="">SPOTIFY</a> <span class="x">x</span> <a href="">TICKETS</a>
                         
                    <span class="x">x</span>  <span class="x">x</span>  <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
                    </h2>
                </div>
                    
                <div class="footerright">
                </div>
                
        </div>
    </div>
<!---------------------------------------------------------------------END FOOTER----------------------------------------------------------------------->
</div>


</body></html>
html css
4个回答
0
投票

我会避免使用绝对定位,直到您更好地了解何时何地使用它以及它有助于解决的问题。

通过撤消已应用的绝对定位,内容将按正确的顺序排列。但是,可能需要进一步改进以满足您的需求。

在下面的示例中,我使用flexbox将页脚推到页面底部。您还会注意到我删除了许多不必要的属性,即width: 100%用于<div>(默认情况下会这样做)。

body {
  margin: 0;
  min-height: 100vh;
  background-color: #111;
  display: flex;
  flex-direction: column;
}

h1 {
  color: #fff;
  position: relative;
  font-family: 'Champagne &amp; Limousines';
  font-weight: normal;
  font-size: 42px;
}

h2 {
  color: #fff;
  text-decoration: none;
  letter-spacing: 2px;
}

.x {
  color: #ef3937;
  text-decoration: none;
  letter-spacing: 2px;
}

.container {}


/*-------------------------------HEADER--------------------------------*/

.headercontainer {}

.header {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.headerleft {}

.headercenter {
  color: #f2f2f2;
}

.logo {
  max-width: 200px;
  margin-top: 20px;
}

.headerright {}


/*-----------------------------END HEADER------------------------------*/


/*------------------------------CONTENT--------------------------------*/

.contentcontainer {
  flex-grow: 1;
  background-color: #111;
}

.content {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.contenleft {}

.contentcenter {
  text-align: center;
}

.contentright {}


/*-----------------------------END CONTENT-----------------------------*/


/*-------------------------------FOOTER--------------------------------*/

.clearfooter {}

.footercontainer {}

.footer {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.footerleft {}

.footercenter {
  text-align: center;
  font-size: 8px;
  font-weight: normal;
  font-family: 'Economica';
  font-weight: 100;
  letter-spacing: 1px;
}

.footerright {}


/*-----------------------------END FOOTER------------------------------*/


/*------------------------------ALGEMEEN-------------------------------*/

a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  text-decoration: underline;
}

@font-face {
  font-family: 'Champagne & Limousines';
  font-style: normal;
  font-weight: normal;
  src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}

@font-face {
  font-family: 'Champagne & Limousines Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Champagne & Limousines Italic'), url('Champagne & Limousines Italic.woff') format('woff');
}

@font-face {
  font-family: 'Champagne & Limousines Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}

@font-face {
  font-family: 'Champagne & Limousines Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Champagne & Limousines Bold Italic'), url('Champagne & Limousines Bold Italic.woff') format('woff');
}
<!-- HEADER -->
<div class="headercontainer">
  <div class="header">
    <div class="headerleft">
    </div>

    <div class="headercenter">
      <div class="logocontainer">
        <img src="" class="logo">
        <!-- insert logo here -->
      </div>
    </div>

    <div class="headerright">
    </div>
  </div>
</div>
<!-- END HEADER -->

<!-- CONTENT -->
<div class="contentcontainer">
  <div class="content">
    <div class="contentleft">
    </div>

    <div class="contentcenter">
      <h1>“Wij organiseren events, kom je <u><b><a href="">dansen</a></b></u>?”</h1>
      <!--Insert ticket link here-->
    </div>


    <div class="contentright">
    </div>
  </div>
</div>
<!-- END CONTENT -->

<!-- FOOTER -->
<div class="footercontainer">
  <div class="footer">

    <div class="footerleft">
    </div>

    <div class="footercenter">
      <h2>
        <a href="">FACEBOOK</a> <span class="x">x</span> <a href="">INSTAGRAM</a> <span class="x">x</span> <a href="">SPOTIFY</a> <span class="x">x</span> <a href="">TICKETS</a>

        <span class="x">x</span> <span class="x">x</span> <span class="x">x</span> PRIVACY POLICY <span class="x">x</span> FAQ <span class="x">x</span> JOBS
      </h2>
    </div>

    <div class="footerright">
    </div>

  </div>
</div>
<!-- END FOOTER -->

0
投票

正如几分钟前所建议的那样,只需从.contentcontainer中移除position:absolute,它应该可以正常工作:https://jsfiddle.net/ilkovs/yqdg62fe/3/

.contentcontainer {
height: auto; 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
padding-top: 0%; 
background-color:#111;

}

代替 :

.contentcontainer {
Position: absolute; 
height: auto; 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
padding-top: 0%; 
background-color:#111;

}


0
投票

分隔页眉和页脚。 1.标题的div,2。内容的另一个div 3.页脚。在你的页脚css中,添加margin-bottom:0;和margin-top:200px;这是一个快速修复,但在分离三个之后,您可以围绕CSS来满足您的设计需求

Header on top.


0
投票

您应该了解如何使用position:absolute,如果您使用absolute,您将<Div>从页面流中取出,所以我认为您应该使用relative定位而不是absolute

再说一遍,如果你打算使用absolute,你需要指定以下四(4)个属性中的一个:top, bottom, left, right,这四个属性可以帮助你随心所欲地移动页面上的<div>并且可以帮助你改变你的文本起来。

最后,所有不同类型的职位都使用我提到的相同的四个属性

© www.soinside.com 2019 - 2024. All rights reserved.