页脚到页面底部？

时间：2016-10-04 17:46:35

标签： html css position footer spacing

所以我知道这里有其他结果可供这个问题，但是我有一个相对“完成”的代码，如果我可以避免它，我不想太多。

基本上我的网站上的所有内容都只是按照我想要的方式显示，除了在较大的显示器上，页脚不会粘在屏幕的底部，而且我的页脚与底部之间存在巨大的差距的屏幕。

下面是我的索引和css文件。页脚元素在结束标记之间被推挤，没有任何效果。我把它放在我的主要内容之外并尝试了底部：0;位置：绝对;它只是导致页脚的右端射出我在容器中指定的宽度之外。

.header,
.navBar,
.pageTitle {
  margin: 0px;
  padding: 0px;
}
body {
  font-size: 20px;
  background-color: #006464;
}
html,
body,
#container {
  min-height: 100vh;
}
footer {
  background-color: #006400;
}
nav,
h1,
h2 {
  font-family: arial;
}
nav a:hover {
  background-color: white;
  color: black;
}
nav a {
  color: white;
}
h2 {
  text-align: center;
  background-color: white;
}
#container {
  width: 1000px;
  margin: auto;
  min-height: 100%;
}
#navBar {
  background-color: #228B22;
  padding: 10px;
}
#signUp {
  color: white;
  font-size: 20px;
  font-family: arial;
}
#welcomeFont {
  color: white;
  font-size: 25px;
  font-family: arial;
}
.header {
  background-color: #006400;
  padding: 20px;
}
.headerAnchor {
  text-decoration: none;
  color: black;
}
.table {
  background: #006400;
  max-width: 100%;
  border: 1px solid black;
  border-spacing: 10px;
  margin-left: auto;
  margin-right: auto;
}
.tableData {
  font-size: 19px;
  background: white;
  border: 1px solid black;
  padding: 8px;
  opacity: .75;
}
.resizeAbout {
  max-height: 50%;
  max-width: 50%;
  margin-top: 50px;
  margin-bottom: 50px;
}
.resizeHome {
  max-height: 50%;
  max-width: 50%;
  margin-top: 50px;
}
.resizePhotos {
  max-height: 40%;
  max-width: 40%;
}
.pageTitle {
  padding-bottom: 0px;
  box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
  color: white;
  font-size: 15px;
  font-family: arial;
  font-style: italic;
}
.poetryCaptions {
  margin-top: 50px;
  color: white;
  font-size: 25px;
  font-family: arial;
}
<body>
  <div id="container">
    <header>
      <h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
    </header>

    <nav id="navBar">
      <a href="index.html">Home</a>
      <a href="music.html">Music</a>
      <a href="photos.html">Photos</a>
      <a href="poetry.html">Poetry</a>
      <a href="about.html">About</a>
    </nav>



    <h2 class="pageTitle">
				Get the Full Effect!
		</h2>

    <img class="resizeHome" src="image/homepage.jpg" alt="home page image">
    <h3 id="welcomeFont">
				Welcome to the home of The Singular Effect!  
		</h3>
    <br>

    <form>
      <span id="signUp">Sign up for our newsletter!</span>
      <br>
      <input type="text" name="emailaddress" value="Email Address">
      <input type="submit" value="submit">
    </form>

  </div>

  <footer>
    &copy; 2016, Chris Hughes - SNHU
  </footer>


</body>

4 个答案:

答案 0 :(得分：0)

您可以尝试使用css-tables。我测试了它，似乎按要求工作。如果您向其添加内容，页脚也会展开。

在body下添加

margin:auto;
display:table;

并在footer下

display:table-row;
position:fixed;
width:1000px;
bottom: 0;

同样在这种情况下，你应该删除margin中的#container，因为它已在body中定义。

我在哪里学到了诀窍：http://colintoh.com/blog/display-table-anti-hero#sticky-footer

答案 1 :(得分：0)

.header,
.navBar,
.pageTitle {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
  padding: 0px;
  font-size: 20px;
  background-color: #006464;
}
html,
body,
#container {
  min-height: 100vh;
}
footer {
  background-color: #006400;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
nav,
h1,
h2 {
  font-family: arial;
}
nav a:hover {
  background-color: white;
  color: black;
}
nav a {
  color: white;
}
h2 {
  text-align: center;
  background-color: white;
}
#container {
  width: 1000px;
  margin: auto;
  min-height: 100vh;
  position: relative;
}
#navBar {
  background-color: #228B22;
  padding: 10px;
}
#signUp {
  color: white;
  font-size: 20px;
  font-family: arial;
}
#welcomeFont {
  color: white;
  font-size: 25px;
  font-family: arial;
}
.header {
  background-color: #006400;
  padding: 20px;
}
.headerAnchor {
  text-decoration: none;
  color: black;
}
.table {
  background: #006400;
  max-width: 100%;
  border: 1px solid black;
  border-spacing: 10px;
  margin-left: auto;
  margin-right: auto;
}
.tableData {
  font-size: 19px;
  background: white;
  border: 1px solid black;
  padding: 8px;
  opacity: .75;
}
.resizeAbout {
  max-height: 50%;
  max-width: 50%;
  margin-top: 50px;
  margin-bottom: 50px;
}
.resizeHome {
  max-height: 50%;
  max-width: 50%;
  margin-top: 50px;
}
.resizePhotos {
  max-height: 40%;
  max-width: 40%;
}
.pageTitle {
  padding-bottom: 0px;
  box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
  color: white;
  font-size: 15px;
  font-family: arial;
  font-style: italic;
}
.poetryCaptions {
  margin-top: 50px;
  color: white;
  font-size: 25px;
  font-family: arial;
}
<!DOCTYPE html>

<head>
  <title>Home - The Singular Effect</title>

</head>

<body>
  <div id="container">
    <header>
      <h1 class="header"><a class="headerAnchor" hreF="index.html">TheSingularEffect.Com</a></h1>
    </header>

    <nav id="navBar">
      <a href="index.html">Home</a>
      <a href="music.html">Music</a>
      <a href="photos.html">Photos</a>
      <a href="poetry.html">Poetry</a>
      <a href="about.html">About</a>
    </nav>



    <h2 class="pageTitle">
	    			Get the Full Effect!
		    </h2>

    <img class="resizeHome" src="image/homepage.jpg" alt="home page image">
    <h3 id="welcomeFont">
    				Welcome to the home of The Singular Effect!
    		</h3> 
    <br>

    <form>
      <span id="signUp">Sign up for our newsletter!</span> 
      <br>
      <input type="text" name="emailaddress" value="Email Address">
      <input type="submit" value="submit">
    </form>

    <footer>
      &copy; 2016, Chris Hughes - SNHU
    </footer>

  </div>



</body>

答案 2 :(得分：0)

I added 1 more div to target all the body content except footer so I can set the height for that element. Here are code that works:

<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
    <title>Home - The Singular Effect</title>
    <link rel="stylesheet" href="css/style.css">`enter code here`
    <style type="text/css">
        * {
               margin: 0px;
               padding: 0px;
            }

            body {
                font-size: 20px;
                background-color: #006464;
            }

            html, body, #container {
              height: 100%;
              margin: 0;
            }

            footer {
                margin-top: 50px;
                background-color: #006400;
                margin-bottom: 0px;
                bottom: 0;
            }


            nav, h1, h2 {
                font-family: arial;
            }

            nav a:hover {
                background-color: white;
                color: black;
            }

            nav a {
                color: white;
            }

            h2 {
                text-align: center;
                background-color: white;
            }

            #container {
                width: 1000px;
                margin: auto;
                min-height: 100%;

            }


            #navBar {
                background-color: #228B22;
                padding: 10px;

            }

            #signUp {
                color: white;
                font-size: 20px;
                font-family: arial;
            }


            #welcomeFont {
                color: white;
                font-size: 25px;
                font-family: arial;
            }


            .header {
                background-color: #006400;
                padding: 20px;
            }


            .headerAnchor {
                text-decoration: none;
                color: black;
            }

            .table {
                background: #006400;
                max-width: 100%;
                border: 1px solid black;
                border-spacing: 10px;
                margin-left: auto;
                margin-right: auto;
            }

            .tableData {
                font-size: 19px;
                background: white;
                border: 1px solid black;
                padding: 8px;
                opacity: .75;
            }


            .resizeAbout{
                max-height: 50%;
                max-width: 50%;
                margin-top: 50px;
                margin-bottom: 50px;

            }

            .resizeHome{
                max-height: 50%;
                max-width: 50%;
                margin-top: 50px;
            }

            .resizePhotos{
                max-height: 40%;
                max-width: 40%;

            }

            .pageTitle {
                padding-bottom: 0px;
                box-shadow: 0px 8px 25px 0px;
            }


            .poetryAuthor {
                color: white;
                font-size: 15px;
                font-family: arial;
                font-style: italic;
            }

            .poetryCaptions {
                margin-top: 50px;
                color: white;
                font-size: 25px;
                font-family: arial;
            }

            .bodyContetExceptFooter{
                padding: 20px;
              min-height: 90%;
              margin: 0 auto -50px;
            }
    </style>
</head>
<body>
    <div id="container">
    <div class="bodyContetExceptFooter">
        <header>
            <h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
        </header>
        <div id="navBar">
        <nav>
                <a href="index.html">Home</a>
                <a href="music.html">Music</a>
                <a href="photos.html">Photos</a>
                <a href="poetry.html">Poetry</a>
                <a href="about.html">About</a>
            </nav>  
        </div>

        <div id="divContent">
            <h2 class="pageTitle">
                Get the Full Effect!
            </h2>

            <img class="resizeHome" src="image/homepage.jpg" alt="home page image">
            <h3 id="welcomeFont">
                Welcome to the home of The Singular Effect!
            </h3> <br>


            <form>
                <span id="signUp">Sign up for our newsletter!</span> <br>
                <input type="text" name="emailaddress" value="Email Address">
                <input type="submit" value="submit">
            </form>
        </div>
        </div>
        <footer>
            &copy; 2016, Chris Hughes - SNHU
        </footer>


    </div>

</body>
</html>

答案 3 :(得分：0)

使用relative上的body定位absolute定位footer并将其定位到left: 0; bottom 0;，同时将width: 100%;添加到footer填充body的全宽。

最后一件事是向正文添加padding-bottom: 23px;，以避免在浏览器的高度低于您的内容时隐藏footer内容。

.header,
.navBar,
.pageTitle {
  margin: 0px;
  padding: 0px;
}
body {
  font-size: 20px;
  background-color: #006464;
  position: relative; /* added */
  padding-bottom: 23px; /* added, where 23px is the height of the footer */
}
html,
body,
#container {
  min-height: 100vh;
}
footer {
  background-color: #006400;
  position: absolute; /* added */
  bottom: 0; /* added */
  left: 0; /* added */
  width: 100%; /* added */
}
nav,
h1,
h2 {
  font-family: arial;
}
nav a:hover {
  background-color: white;
  color: black;
}
nav a {
  color: white;
}
h2 {
  text-align: center;
  background-color: white;
}
#container {
  width: 1000px;
  margin: auto;
  min-height: 100%;
}
#navBar {
  background-color: #228B22;
  padding: 10px;
}
#signUp {
  color: white;
  font-size: 20px;
  font-family: arial;
}
#welcomeFont {
  color: white;
  font-size: 25px;
  font-family: arial;
}
.header {
  background-color: #006400;
  padding: 20px;
}
.headerAnchor {
  text-decoration: none;
  color: black;
}
.table {
  background: #006400;
  max-width: 100%;
  border: 1px solid black;
  border-spacing: 10px;
  margin-left: auto;
  margin-right: auto;
}
.tableData {
  font-size: 19px;
  background: white;
  border: 1px solid black;
  padding: 8px;
  opacity: .75;
}
.resizeAbout {
  max-height: 50%;
  max-width: 50%;
  margin-top: 50px;
  margin-bottom: 50px;
}
.resizeHome {
  max-height: 50%;
  max-width: 50%;
  margin-top: 50px;
}
.resizePhotos {
  max-height: 40%;
  max-width: 40%;
}
.pageTitle {
  padding-bottom: 0px;
  box-shadow: 0px 8px 25px 0px;
}
.poetryAuthor {
  color: white;
  font-size: 15px;
  font-family: arial;
  font-style: italic;
}
.poetryCaptions {
  margin-top: 50px;
  color: white;
  font-size: 25px;
  font-family: arial;
}
<body>
  <div id="container">
    <header>
      <h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
    </header>

    <nav id="navBar">
      <a href="index.html">Home</a>
      <a href="music.html">Music</a>
      <a href="photos.html">Photos</a>
      <a href="poetry.html">Poetry</a>
      <a href="about.html">About</a>
    </nav>



    <h2 class="pageTitle">
				Get the Full Effect!
		</h2>

    <img class="resizeHome" src="image/homepage.jpg" alt="home page image">
    <h3 id="welcomeFont">
				Welcome to the home of The Singular Effect!  
		</h3>
    <br>

    <form>
      <span id="signUp">Sign up for our newsletter!</span>
      <br>
      <input type="text" name="emailaddress" value="Email Address">
      <input type="submit" value="submit">
    </form>

  </div>

  <footer>
    &copy; 2016, Chris Hughes - SNHU
  </footer>


</body>

相关问题
最新问题