移动屏幕尺寸上的页脚

时间：2015-10-12 15:50:07

标签： html css

这让我很生气，我已经尝试了我所知道的所有可能的解决方案以及我在SO上找到的其他解决方案，但我必须遗漏一些东西。

我的网站有一个绝对位置的页脚，可以在桌面上运行奇迹，但是当我在移动屏幕上查看大小时，页脚会跳转到各种位置，具体取决于我如何为其设置CSS位置，看下面的代码

* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, Serif, sans-serif;
}
/*background:rgb(255,224,240);*/

#logo {
  width: 45%;
  margin: auto;
}
#wrapper {
  width: 60%;
  margin: auto;
  height: 100%;
}
#nav {
  width: 50%;
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 28%;
}
footer {
  width: 60%;
  height: 5%;
  position: absolute;
  bottom: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
li {
  display: inline-block;
}
li a {
  display: block;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  font-family: sans-serif;
  color: rgb(0, 0, 0);
}
li:hover a {
  border-bottom: 4px solid rgb(255, 65, 180);
}
p {
  text-align: center;
}
.important {
  text-align: left;
  margin-top: 2%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
h2 {
  text-align: center;
}
#left_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  margin-right: 3%;
  border: 2px solid rgb(255, 65, 180);
}
#right_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  border: 2px solid rgb(255, 65, 180);
}
#centre_block {
  width: 100%;
  float: left;
  margin-top: 6%;
  border: 2px solid rgb(255, 65, 180);
}
@media screen and (max-width: 1024px) {
  #wrapper {
    width: 99%;
    min-height: 100%;
  }
  #body {
    padding-bottom: 5%;
  }
  #nav {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 28%;
  }
  footer {
    width: 100%;
    height: 5%;
    bottom: 0;
  }
}
<div id="wrapper">
  <!--60% width-->
  <header>
    <div id="logo" class="logo">
      <h1>This is where the logo will be</h1>
    </div>
    <!--50% centred-->
    <div id="nav">
      <!--50% width centred-->
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">News</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
      </ul>
    </div>
  </header>
  <div id="left_page" class="columns">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div id="right_page" class="columns">
    <h2>Sed efficitur consequat massa ut sagittis.</h2>
  </div>
  <div id="centre_block">
    <h1>Sed dapibus dapibus lectus in auctor.</h1>
  </div>
  <footer>
    <h3>This will be the footer</h3>
    <p>This is where &copy; Copyright information goes</p>
  </footer>

</div>

我现在整天都在拔头发，有人可以协助吗？

由于

2 个答案:

答案 0 :(得分：0)

首先，欢迎来到精彩的网络开发世界。

备注1：Html是单线程的，事物从上到下堆叠。 ＆＃34;职位：绝对＆＃34;将这个元素放在网格之外，因此它在这里的使用非常糟糕，因为事情会相互忽视并聚集起来。

备注2：当你漂浮的东西时，一定要

  1. 在父元素中包含它们，因此浮点数不适用于其他元素 或
  2. 添加＆＃34;清除：左;或者清楚：对;＆＃34;到下面的元素，以便它不会浮起（页脚浮动并忽略前面div的存在）

    3. 这是一个稍微好一点的代码来运行：

          *{margin:0;padding:0;font-family:"Helvetica Neue", Helvetica, Arial, 

Serif, sans-serif;}/*background:rgb(255,224,240);*/

#logo{width:45%;margin:auto;}

#wrapper{width:60%;margin:auto;height:100%;}

#nav{width:50%;float:left;margin:0;padding:0;margin-left:28%;}

footer{width:100%;height:5%; text-align: center; clear: left;}

ul{list-style:none;padding:0;margin:0;}

li{display:inline-block;}

li a{display:block;padding:0 20px;height:50px;line-height:50px;text-align:center;text-decoration:none;font-family:sans-serif;color:rgb(0,0,0);}

li:hover a{border-bottom:4px solid rgb(255,65,180);}

p{text-align:center;}

.important{text-align:left;margin-top:2%;margin-left:1%;margin-right:1%;margin-bottom:2%;}

h2{text-align:center;}

#left_page{width:48%;margin-top:6%;float:left;margin-right:3%;border:2px solid rgb(255,65,180);}

#right_page{width:48%;margin-top:6%;float:left;border:2px solid rgb(255,65,180);}

#centre_block{width:100%;float:left;margin-top:6%;border:2px solid rgb(255,65,180);}

@media screen and (max-width:1024px){

    #wrapper{width:99%;min-height:100%;}

    #body{padding-bottom:5%;}

    #nav{width:50%;margin:0;padding:0;margin-left:28%;}

    footer{width:100%;height:5%;}

    基本上我

    • 通过移除＆＃34; bottom：0;＆＃34;阻止页脚粘到底部。这使得它与其他小尺寸的东西重叠（你真的不想要一个随你滚动的页脚）
    • 删除了#nav {float：left;}，允许以下div重叠（你只想让li'浮动。）
    • 删除绝对定位，以便在前一个元素之后定位事物

    尝试重新考虑这些新网站。

    古德勒克！ - Khaled Ali

答案 1 :(得分：0)

问题

1。）页脚高度=屏幕尺寸的5％。文本内容溢出了它。

2。）身体和HTML没有宣布高度。

3.。）#wrapper内的内容已浮动，之后没有清算元素。

4。）您的页脚将始终可见，这将与内容重叠。

修复

1。）从height:5%;删除footer。

2。）添加这一行CSS：html, body {height:100%;}

3.。）在#wrapper之后添加一个伪元素：

#wrapper:after {
  content:"";
  display:block;
  clear:both;
}

3。）如果html和body始终是100%窗口高度，那么您可以将#wrapper设置为min-height:100%和{{1} }。这将成为绝对定位元素的全能。它们将出现在包装器的底部，它可以是屏幕的底部，也可以是更低的内容，具体取决于内容长度。我们还需要在包装器的底部添加一些填充以防止叠加，并确保将position:relative设置为box-sizing，以使整体高度仍为100％。 （也可以使用calc（））

带有更改的截屏视频

enter image description here

工作代码

我在下面的代码段中修复了所有这些内容，并突出显示了红色背景的页脚，以便您可以看到。

＆＃13;
＆＃13; 
border-box
＆＃13; 
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, Serif, sans-serif;
}
/*background:rgb(255,224,240);*/

html, body {
  height:100%;
}
#logo {
  width: 45%;
  margin: auto;
}
#wrapper {
  width: 60%;
  margin: auto;
  min-height: 100%;
  position:relative;
  padding-bottom:60px;
  box-sizing:border-box;
}
#wrapper:after {
  clear:both;
  display:block;
  content:"";
}
#nav {
  width: 50%;
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 28%;
}
footer {
  width: 60%;
  background-color:red;
  position: absolute;
  bottom: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
li {
  display: inline-block;
}
li a {
  display: block;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  font-family: sans-serif;
  color: rgb(0, 0, 0);
}
li:hover a {
  border-bottom: 4px solid rgb(255, 65, 180);
}
p {
  text-align: center;
}
.important {
  text-align: left;
  margin-top: 2%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
h2 {
  text-align: center;
}
#left_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  margin-right: 3%;
  border: 2px solid rgb(255, 65, 180);
}
#right_page {
  width: 48%;
  margin-top: 6%;
  float: left;
  border: 2px solid rgb(255, 65, 180);
}
#centre_block {
  width: 100%;
  float: left;
  margin-top: 6%;
  border: 2px solid rgb(255, 65, 180);
}
@media screen and (max-width: 1024px) {
  #wrapper {
    width: 99%;
    min-height: 100%;
  }
  #body {
    padding-bottom: 5%;
  }
  #nav {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 28%;
  }
  footer {
    width: 100%;
    bottom: 0;
  }
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题