如何使链接保持在页面底部而不是屏幕

时间：2017-06-16 10:44:13

标签： html css

这是我的fiddle

正如您所看到的，链接位于屏幕的top:95%而不是页面。如何使其成为页面的95％？ 

.terms {
	position:absolute;
top:95%;
right:10px;
}

.terms a{
	color:#333;
	text-decoration:none;
	margin-left:10px;

}
<h1>
Hello
</h1>
<p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


<div class="terms">
<a href="contact.html">Contact Us</a>
<a href="terms.html">Terms</a>
<a href="privacy.html">Privacy</a>
</div>

6 个答案:

答案 0 :(得分：2)

围绕元素包裹容器并使其位置：relative 

.container {
  position: relative;
}

.terms {
  position: absolute;
  top: 95%;
  right: 10px;
}

.terms a {
  color: #333;
  text-decoration: none;
  margin-left: 10px;
}
<div class="container">
  <h1>
    Hello
  </h1>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>
  <p>Hello again</p>


  <div class="terms">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
  </div>
</div>

答案 1 :(得分：0)

最简单的方法，试试这个， position: relative; bottom: 0; float: right; 

.terms {
    position:relative;
    bottom: 0;
    float: right;
}

.terms a{
	color:#333;
	text-decoration:none;
	margin-left:10px;

}
<h1>
Hello
</h1>
<p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


<div class="terms">
<a href="contact.html">Contact Us</a>
<a href="terms.html">Terms</a>
<a href="privacy.html">Privacy</a>
</div>

答案 2 :(得分：0)

您可以将position:relative添加到body。或者添加包装div并将position:relative添加到该div。

  

对于绝对位置元素，上，左下，右下的值将相对于具有相对（或绝对）定位的下一个父元素

＆＃13;
＆＃13; 
.wrapper{
  position:relative;
 }
 
 .terms {
    	position:absolute;
       top:95%;
       right:10px;
    }

    .terms a{
    	color:#333;
    	text-decoration:none;
    	margin-left:10px;

    }
＆＃13; 
<div class="wrapper">
<h1>
    Hello
    </h1>
    <p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


    <div class="terms">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
    </div>
    
 </div>
＆＃13;
＆＃13;
＆＃13;

要将其放置在屏幕底部，您可以使用position:fixed;这会将其定位在相对于屏幕视口的指定位置，滚动时不要移动它。

＆＃13;
＆＃13; 
.terms {
	position:fixed;
   top:94%;
   right:10px;
}

.terms a{
	color:#333;
	text-decoration:none;
	margin-left:10px;

}
＆＃13; 
<h1>
Hello
</h1>
<p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


<div class="terms">
<a href="contact.html">Contact Us</a>
<a href="terms.html">Terms</a>
<a href="privacy.html">Privacy</a>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您已完全定位此元素。

对于它来说，95％表示元素需要与其他东西相关的任何东西。那么95％来自...什么？

  

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。 绝对定位元素相对于最近定位的祖先（非静态）定位。如果定位的祖先不存在，则使用初始容器。

     

MDN

在这种情况下，它是body元素。

所以添加

body {
  position: relative;
}


body {
  position: relative;
}

.terms {
  position: absolute;
  top: 95%;
  right: 10px;
}

.terms a {
  color: #333;
  text-decoration: none;
  margin-left: 10px;
}
<h1>
  Hello
</h1>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>
<p>Hello again</p>


<div class="terms">
  <a href="contact.html">Contact Us</a>
  <a href="terms.html">Terms</a>
  <a href="privacy.html">Privacy</a>
</div>

答案 4 :(得分：0)

默认位置：分配给html的相对属性标记表示屏幕。因此，将 position：relative属性添加到body标记。

答案 5 :(得分：0)

<style>
    .terms {
        position:absolute;
    top:95%;
    right:10px;
    }

    .terms a{
        color:#333;
        text-decoration:none;
        margin-left:10px;

    }
    </style>
    <h1>
    Hello
    </h1>
    <p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


    <footer style="float:right;">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
    </footer>

 <style>
    .terms {
        position:absolute;
    top:95%;
    right:10px;
    }

    .terms a{
        color:#333;
        text-decoration:none;
        margin-left:10px;

    }
    </style>
    <h1>
    Hello
    </h1>
    <p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p><p>Hello again</p>


    <footer style="float:right;">
    <a href="contact.html">Contact Us</a>
    <a href="terms.html">Terms</a>
    <a href="privacy.html">Privacy</a>
    </footer>
相关问题
最新问题