将容器移到页脚上方

时间：2019-02-22 19:50:25

标签： html css

我目前是社区的新手，并且希望为我为我的一个朋友创建的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>

4 个答案:

答案 0 :(得分：0)

如分钟前所述，只需从.contentcontainer中删除position：absolute，它应该可以工作：https://jsfiddle.net/ilkovs/yqdg62fe/3/ 

with open (f1, encoding = "utf8", errors = "ignore") as f:
    lines = f.readlines ()
    lines = [l for l in lines if "^ 3" in l]
    with open (f2, "w") as f1:
        f1.writelines (lines)

}

而不是：

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

}

答案 1 :(得分：0)

在您完全了解何时何地使用它以及它可以解决哪些问题之前，我将避免使用绝对定位。

通过撤消已应用的绝对定位，内容将以正确的顺序排列。不过，可能需要进一步完善以适应您的需求。

在下面的示例中，我使用flexbox将页脚推到页面底部。您还将注意到，我删除了许多不必要的属性，即width: 100%的{​​{1}}（默认情况下会这样做）。

<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');
}

答案 2 :(得分：0)

您应该了解如何使用position:absolute，如果您使用absolute，则会使<Div>脱离页面流，所以我认为您应该使用{{1} }，而不是relative。

然后再次，如果要使用absolute，则需要指定以下四个（4）属性之一： absolute，这四个属性可帮助您随意将top, bottom, left, right在页面上移动，并可帮助您向上移动文本。

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

答案 3 :(得分：0)

分隔页眉和页脚。 1. div用于页眉，2.另一个div用于内容3.页脚。在页脚CSS中，添加margin-bottom：0;和margin-top：200px;这是一个快速解决方案，但是将三者分开后，您可以围绕CSS进行游戏以满足您的设计需求

Header on top.

相关问题
最新问题