Question

我的网页在我的屏幕上看起来很好。我将所有div放在body标签上，身体有相对中毒，因此它可以像网页的容器一样。唯一不能让身体内部的div做的就是从底部绝对位置。我不知道为什么这不起作用。因为当我在不同的屏幕上访问页面时，当我使用top时，div的位置并非完全没有，所以我尝试使用底部定位。

HTML code：

<body>
    <div id="statement_div"> <p id="statement"> Access to Every Bad Movie Ever. </p>  </div>

    <div id="signin_button"> <span style="position: relative; top: 3px"> Sign In </span> </div>
    <div id="create_account_button"> <span style="position: relative; top: 3px"> Create Account </span> </div> 
</div>

CSS代码：

body {
background-repeat: no-repeat center;
background-size: cover;
background-attachment: fixed;
margin: 0;
height: 100%;
width: 100%;
min-width: 1200px;
position: relative;
}

#signin_button {
width: 12%;
min-width: 150px;
height: 40px;
color: white;
background-color: #FF3030;
cursor: pointer;
text-align: center;
position: absolute;
bottom: 10px;
left: 70%;
font-size: 20px;
border-radius: 5px;
font-family: Futura;
}

#create_account_button {
width: 16%;
min-width: 150px;
height: 40px;
color: white;
background-color: #3399FF;
cursor: pointer;
text-align: center;
position: absolute;
bottom: 10px;
left: 83%;
font-size: 20px;
border-radius: 5px;
font-family: Futura;
}

Answer 1

为什么不尝试使用position: fixed？例如：

#signin_button {
    width: 12%;
    min-width: 150px;
    height: 40px;
    color: white;
    background-color: #FF3030;
    cursor: pointer;
    text-align: center;
    position: fixed; /* this is the only thing you need to do differently */
    bottom: 10px;
    left: 70%;
    font-size: 20px;
    border-radius: 5px;
    font-family: Futura;
}

Answer 2

body应将min-height设置为100vh（100％视口高度）

body {
background-repeat: no-repeat center;
background-size: cover;
background-attachment: fixed;
margin: 0;
height: 100%;
width: 100%;
min-width: 1200px;
position: relative;
/* HERE'S THE DEAL */  min-height: 100vh;
}

#signin_button {
width: 12%;
min-width: 150px;
height: 40px;
color: white;
background-color: #FF3030;
cursor: pointer;
text-align: center;
position: absolute;
bottom: 10px;
left: 70%;
font-size: 20px;
border-radius: 5px;
font-family: Futura;
}

#create_account_button {
width: 16%;
min-width: 150px;
height: 40px;
color: white;
background-color: #3399FF;
cursor: pointer;
text-align: center;
position: absolute;
bottom: 10px;
left: 83%;
font-size: 20px;
border-radius: 5px;
font-family: Futura;
}

<div id="statement_div">
  <p id="statement"> Access to Every Bad Movie Ever.</p>
</div>

<div id="signin_button">
  <span>Sign In</span>
</div>

<div id="create_account_button">
  <span>Create Account</span>
</div>

Answer 3

只需从position: relative;标记中移除body样式，因为这几乎是不必要的，并且它会导致问题，因为正文的高度占据了100％的内容高度，而不是屏幕。

从底部定位绝对

3 个答案: