Question

如果我给元素提供前50％的保证金，则会将其从屏幕上移除。它假设在中心。但它的屏幕外。保证金最高100％应该是最低点，而不是它的一半，50％。我做错了什么？

HTML

     <div class="container">
    <div class="buttons">

            <a class="website" href="#">23Designs</a>


            <a class="blog" href="http://www.nuori.in">Nuori</a>

    </div>
    <p>Copyright 2015 23Desings</p>     
</div>

CSS

.container{
width: 100%;
margin: 0 auto;
height: 100%; 
position: relative;
overflow: hidden;
}
.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 45%;
}
.blog{
width: 100px;
border-radius: 2px;
box-shadow: 0px 0px 2px #ccc;
text-align: center;
padding: 10px 20px;
background-color: #F9690E;
color: #fff;
font-size: 14px;
position: absolute;
left: 0px;
}
.blog:hover{
color: #f9f9f9;
box-shadow: 2px 2px 2px #b9b9b9;
}
.website{
width: 100px;
border-radius: 2px;
box-shadow: 0px 0px 2px #ccc;
text-align: center;
padding: 10px 20px;
background-color: #22A7F0;
color: #fff;
font-size: 14px;
position: absolute;
right: 0px;
}
.website:hover{
color: #f9f9f9;
box-shadow: 2px 2px 3px #b9b9b9;
}
p{ 
height: 50px;
color: #CCC;
text-align: center;
bottom: 10px;
position: absolute;
left: 0;
right: 0;

}

Answer 1

您可以使用视口值而不是ems，pxs或pts。

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，取较小者

1vmax = 1vw或1vh，取较大者

尝试margin-top:50vh视口的高度为50％。

.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 50vh; //changed this
}

<强> Demo here

保证金最高50％制造元素在屏幕外

1 个答案: