Question

我正在尝试为我的页面创建一个页脚。我试图让它坚持在页面的绝对底部，经过一些在线研究，它告诉我修改我身体的高度值。但是，一旦我这样做，没有任何改变。这是我的代码：

    *{
margin:0;
padding:0:
}

html{
    height:100%;
    min-height:100%;
}

#wrapper{
    height: 100%;
}

/*****************/
/*****HEADER******/
/*****************/



#header{

    width: 100%;

    margin-top:0px;
    margin-bottom:2.5%;
    margin-right:0px;
    margin-left:0px;

    padding-top:2%;
    padding-bottom:0.5%;
    padding-left:0%;
    padding-right:0%;

    border-bottom-style:solid;
    border-bottom-color: black;

    background: lightgrey;
}

#header>h1{
    color:black;
    margin: 0px 0px 0px 10px;
}

#header>p{
    font-style: italic;
    text-align: left;
    color:black;
    margin: 0px 0px 0px 20px;
}

/*****************/
/*****Body******/
/*****************/

#content{

    position: relative;

    height:100%;
    min-height: 100%;
    max-height: 100%;
}


#content>p{
    margin-left:2.5%;
}

#intro_text{
    font-style: italic;

    margin-bottom:2.5%;
}

#main_nav{
    margin-top:1%;
    margin-left:5%;
}




/*****************/
/******FOOTER*****/
/*****************/

#footer{

    font-style: italic;
    text-align: center;
    position: relative;

    bottom: 0;

}

编辑：添加了HTML

<!DOCTYPE html>
<html>


<head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="./css/main.css">
     <script src="./js/script.js"></script>
</head>

<body>



    <div id="wrapper">

        <div id="header">
            <h1>My Web Space</h1>
            <p> First HTML Page using Sublime Text</p>
        </div>



        <div id="content">

            <p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>


            <p>Links to various test pages I am working with</p>
            <ul id=main_nav>
                <li><a href=test_link.html>Linking to another page test</a></li>

            </ul>

        </div>

        <div id="footer">
            <p id=footer_text>Me, 2016</p>
        </div>

    </div>

</body>


</html>

Answer 1

尝试这只是修改#footer

*{
margin:0;
padding:0:
}

html{
    height:100%;
    min-height:100%;
}

#wrapper{
    height: 100%;
}

/*****************/
/*****HEADER******/
/*****************/



#header{

    width: 100%;

    margin-top:0px;
    margin-bottom:2.5%;
    margin-right:0px;
    margin-left:0px;

    padding-top:2%;
    padding-bottom:0.5%;
    padding-left:0%;
    padding-right:0%;

    border-bottom-style:solid;
    border-bottom-color: black;

    background: lightgrey;
}

#header>h1{
    color:black;
    margin: 0px 0px 0px 10px;
}

#header>p{
    font-style: italic;
    text-align: left;
    color:black;
    margin: 0px 0px 0px 20px;
}

/*****************/
/*****Body******/
/*****************/

#content{

    position: relative;

    height:100%;
    min-height: 100%;
    max-height: 100%;
}


#content>p{
    margin-left:2.5%;
}

#intro_text{
    font-style: italic;

    margin-bottom:2.5%;
}

#main_nav{
    margin-top:1%;
    margin-left:5%;
}




/*****************/
/******FOOTER*****/
/*****************/

#footer{

    font-style: italic;
    text-align: center;
  position: fixed;
  background:#f00;
  width:100%;
    bottom: 0;

}

<!DOCTYPE html>
<html>


<head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="./css/main.css">
     <script src="./js/script.js"></script>
</head>

<body>



    <div id="wrapper">

        <div id="header">
            <h1>My Web Space</h1>
            <p> First HTML Page using Sublime Text</p>
        </div>



        <div id="content">

            <p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>


            <p>Links to various test pages I am working with</p>
            <ul id=main_nav>
                <li><a href=test_link.html>Linking to another page test</a></li>

            </ul>

        </div>

        <div id="footer">
            <p id=footer_text>Me, 2016</p>
        </div>

    </div>

</body>


</html>

Answer 2

使用flexbox，您可以扩展内容区域以填充包装

JSfiddle：jsfiddle.net/sabgu8r4

＆＃13;

body {
  height: 100%;
}

/*****************/

* {
  margin: 0;
  padding: 0:
}

html {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}


/*****************/
/*****HEADER******/
/*****************/

#header {
  width: 100%;
  margin-top: 0px;
  margin-bottom: 2.5%;
  margin-right: 0px;
  margin-left: 0px;
  padding-top: 2%;
  padding-bottom: 0.5%;
  padding-left: 0%;
  padding-right: 0%;
  border-bottom-style: solid;
  border-bottom-color: black;
  background: lightgrey;
}

#header>h1 {
  color: black;
  margin: 0px 0px 0px 10px;
}

#header>p {
  font-style: italic;
  text-align: left;
  color: black;
  margin: 0px 0px 0px 20px;
}


/*****************/
/*****Body******/
/*****************/

#content {
  /*position: relative;*/
  flex-grow: 1;
  /*height: 100%;
  min-height: 100%;
  max-height: 100%;*/
}

#content>p {
  margin-left: 2.5%;
}

#intro_text {
  font-style: italic;
  margin-bottom: 2.5%;
}

#main_nav {
  margin-top: 1%;
  margin-left: 5%;
}


/*****************/
/******FOOTER*****/
/*****************/

#footer {
  font-style: italic;
  text-align: center;
  /*position: relative;
  bottom: 0;*/
}

＆＃13;

<div id="wrapper">

  <div id="header">
    <h1>My Web Space</h1>
    <p> First HTML Page using Sublime Text</p>
  </div>



  <div id="content">

    <p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>

    <p>Links to various test pages I am working with</p>

    <ul id=main_nav>
      <li><a href=test_link.html>Linking to another page test</a></li>

    </ul>

    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
    <p>CONTENT</p>
  </div>

  <div id="footer">
    <p id=footer_text>Me, 2016</p>
  </div>

</div>

＆＃13;

Answer 3

这是解决方案的核心逻辑：

$('#myform').submit

JSBin

我尽量保持简单。

此答案不使用 flexbox 其纯粹的＆＃39;的CSS。

将页脚底部放置在100％高度

3 个答案:

这是解决方案的核心逻辑：

JSBin