HTML页脚在某些分辨率下略高于页面底部浮动

时间：2020-01-21 20:58:09

标签： html css

我正准备让我的网站准备好进行拼贴画采访，但快要完成了，但是我无法弄清楚为什么如果窗口的大小超过一定大小，页脚就会漂浮在页面底部的上方。

我将包括此处使用的HTML和CSS：

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

body{
    background-color: white;
    color: rgb(85, 85, 85);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}

.clr{
    clear: both;
}

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

#navbar .container{
    margin: 0;
}

.button{
    background-color: rgb(51, 51, 51);
    color: white;    
}

.button:hover{
    background-color: green;
}

#myHeader{
    background-color: green;
    color: white;
}

#myHeader .container{
    width: 90%;
}

#navbar{
    background-color: rgb(51, 51, 51);
    color: white;
    
}

#navbar ul{
    padding: 0;
    list-style: none;
}

#navbar li{
    display: inline;
}

#navbar a{
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 15px;

}

#showcase{
    background-image: url("../Images/showcase.jpg");
    background-position: center right;
    background-size: 100% 100%;
    color: white;
    min-height: 300px;
    margin-bottom: 30px;
    text-align: center;
}

#showcase h1{
    color: white;
    font-size: 50px;
    line-height: 1.6em;
    padding-top: 30px;
}

#main{
    float: left;
    width: 70%;
    padding:0 30px;
    box-sizing: border-box;
}

#sidebar{
    float: right;
    width: 30%;
    background: rgb(51, 51, 51);
    color: white;
    padding:0 30px;
    box-sizing: border-box;
}

#mainFooter{
    background: rgb(51, 51, 51);
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

@media(max-width: 600px){

    #main{
        width: 100%;
        float: none;
    }
    
    #sidebar{
        width: 100%;
        float: none;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Finn Llewellyn</title>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>
    <body>
        <header id="myHeader">
            <div class="container">
                <h1>Finn Llewellyn</h1>
            </div>
        </header>

        <nav id="navbar">
            <div class="container">
                <ul>
                    <li><a class="button" href="#">Contact</a></li>
                    <li><a class="button" href="#">Projects</a></li>
                    <li><a class="button" href="#">Cool Things</a></li>
                    <li>Note: These don't do anyting yet lol</li>
                </ul>
            </div>
        </nav>

        <section id="showcase">
            <div class="container">
                <h1>Computers are cool lol</h1>
                <h2>That's why this site is awful on mobile</h2>
            </div>
        </section>

        <div class="container">
            <section id="main">
                <h1>About Me</h1>
                <p>
                    My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and 
                    which spec components will best suit a specific use case. I also like to think I'm alright at diagnosing and solving technical issues. Staying
                    true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn
                    a real, spoken language, like Spanish. Hopefully i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science,
                    Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a 
                    B-Tech in softwar/app development.
                </p>
            </section>
            <aside id="sidebar">
                <h1>Cool Things</h1>
                <ol>
                    <li>Star Wars</li>
                    <li>Half-Life series</li>
                    <li>DOOM</li>
                    <li>Radiohead</li>
                    <li>Blur</li>
                    <li>R.E.M</li>
                    <li>YouTube</li>
                    <li>AMD Ryzen CPUs</li>
                    <li>Other geeky stuff</li>
                </ol>
            </aside>
        </div>

        <div id="mainFooter">
            <p>This footer is just here to look nice</p>
        </div>
    </body>
</html>

我已经尝试过将position: absolute;，width: 100%;和bottom: 0;添加到页脚类中，但是如果它到达页面的下端，它将覆盖内容。

我将不胜感激。

3 个答案:

答案 0 :(得分：2)

您可以试试吗？我刚刚添加了一个附加容器，并为其设置了最小高度，以便它使用视口中的可用空间并将页脚推到底部。

为进一步说明，页面上有3个主要部分：

  • Navar或Header
  • 内容
  • 脚步

该想法是使内容与屏幕一样高，以使页脚不位于屏幕底部边缘上方。因此，您可以只创建一个包含所有内容部分的容器，并添加一些CSS以使其使用所有可用高度。

然后我要做的是创建main-container div，然后添加一个CSS规则：

.main-container: {min-height: calc(100vh - 221px)}

我使用了calc()函数，因此我可以更好地控制最终大小，在这种情况下，您的页脚总高度+导航栏总高度的总和为221px（您可以通过检查每个元素），因此现在.main-containr的最小总高度减去页脚和导航栏使用的空间，这样，如果屏幕上的内容很少，页脚仍将位于底部边缘，因为主容器正在使用该空间。

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

/*
  Target the element that holds all your content, and set a minimum height so it uses the full viewport height (100vh)
  
*/

.main-content {
  min-height: calc(100vh - 221px)
}

body {
  background-color: white;
  color: rgb(85, 85, 85);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 0;
}

.clr {
  clear: both;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#navbar .container {
  margin: 0;
}

.button {
  background-color: rgb(51, 51, 51);
  color: white;
}

.button:hover {
  background-color: green;
}

#myHeader {
  background-color: green;
  color: white;
}

#myHeader .container {
  width: 90%;
}

#navbar {
  background-color: rgb(51, 51, 51);
  color: white;
}

#navbar ul {
  padding: 0;
  list-style: none;
}

#navbar li {
  display: inline;
}

#navbar a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 15px;
}

#showcase {
  background-image: url("../Images/showcase.jpg");
  background-position: center right;
  background-size: 100% 100%;
  color: white;
  min-height: 300px;
  margin-bottom: 30px;
  text-align: center;
}

#showcase h1 {
  color: white;
  font-size: 50px;
  line-height: 1.6em;
  padding-top: 30px;
}

#main {
  float: left;
  width: 70%;
  padding: 0 30px;
  box-sizing: border-box;
}

#sidebar {
  float: right;
  width: 30%;
  background: rgb(51, 51, 51);
  color: white;
  padding: 0 30px;
  box-sizing: border-box;
}

#mainFooter {
  background: rgb(51, 51, 51);
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

@media(max-width: 600px) {
  #main {
    width: 100%;
    float: none;
  }
  #sidebar {
    width: 100%;
    float: none;
  }
}
<body>
  <header id="myHeader">
    <div class="container">
      <h1>Finn Llewellyn</h1>
    </div>
  </header>

  <nav id="navbar">
    <div class="container">
      <ul>
        <li><a class="button" href="#">Contact</a></li>
        <li><a class="button" href="#">Projects</a></li>
        <li><a class="button" href="#">Cool Things</a></li>
        <li>Note: These don't do anyting yet lol</li>
      </ul>
    </div>
  </nav>
  
  <!-- Group all of your content inside a single container, not including the navbar and the footer -->
  <div class="main-content">
    <section id="showcase">
      <div class="container">
        <h1>Computers are cool lol</h1>
        <h2>That's why this site is awful on mobile</h2>
      </div>
    </section>

    <div class="container">
      <section id="main">
        <h1>About Me</h1>
        <p>
          My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and which spec components will best suit a specific use case. I also like to think I'm alright
          at diagnosing and solving technical issues. Staying true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn a real, spoken language, like Spanish. Hopefully
          i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science, Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a
          B-Tech in softwar/app development.
        </p>
      </section>
      <aside id="sidebar">
        <h1>Cool Things</h1>
        <ol>
          <li>Star Wars</li>
          <li>Half-Life series</li>
          <li>DOOM</li>
          <li>Radiohead</li>
          <li>Blur</li>
          <li>R.E.M</li>
          <li>YouTube</li>
          <li>AMD Ryzen CPUs</li>
          <li>Other geeky stuff</li>
        </ol>
      </aside>
    </div>
  </div>

  <div id="mainFooter">
    <p>This footer is just here to look nice</p>
  </div>

答案 1 :(得分：1)

如何将position: relative和bottom: 0应用于您的#mainFooter元素？

使用relative而不是absolute定位应该可以防止页脚覆盖其他内容。

#mainFooter{
    position: relative;
    bottom: 0;
    /* other styling properties like color etc... */
}

答案 2 :(得分：0)

页脚下方留空的原因是因为内容不再占用所有可用空间，并且不再有任何可滚动内容。您可以增加内容量，空白空间等，以使内容至少占据较大屏幕上的视口高度。

相关问题
最新问题