在高分辨率屏幕上可以,所有内容均可见:http://prntscr.com/bo3rf4
但以较低的分辨率:http://prntscr.com/bo3rmw
下面的内容被页脚覆盖隐藏
我想用CSS使它适合屏幕尺寸
我也不想让身体溢出
我尝试覆盖背景尺寸设置但没有任何反应
您可以在以下位置找到源:http://devserv.5gbfree.com/eune.html-我无法添加超过2个链接,因此将其设置为http ^^
<div class="ov-top masthead">
<div class="content center">
<div class="contop">
<p class="yellow_text"> Hello! </p>
<div><a class="gumb" href="index.html" >SELECT SERVER</a></div>
</div>
<div class="cont">
<a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
<div class="concen"></div>
</div>
.ov-top, .page-top, .signup-main, .thanks-top {
padding-top: 180px;
padding-bottom: 15px;
}
.center {
text-align: center;
}
.content {
width: 1000px;
margin: 0 auto;
}
.masthead h1.heading-shadow {
position: absolute;
width: inherit;
text-shadow: 0 0 7px #010a13;
color: rgba(1,10,19,0);
background: 0 0;
z-index: 1;
}
.masthead h1 {
margin-top: 0;
position: relative;
z-index: 2;
cursor: default;
}
.changelog .head .title, .headline1, .masthead h1 {
font-family: "Beaufort for LOL";
font-weight: 500;
font-style: normal;
font-size: 60px;
color: #f0e6d2;
letter-spacing: 0;
line-height: 75px;
text-transform: uppercase;
margin-bottom: 60px;
background: -webkit-repeating-linear-gradient(#e5cda0 0,#e5cda0 10px,#79622b 60px,#79622b 75px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contcen {
background: rgba(6, 29, 37, 0.87);
padding: 20px;
position: relative;
}
}
.contop {
background-color: rgba(6, 13, 19, 0.89);
font-size: 20px;
font-weight: 300;
line-height: 20px;
padding: 20px;
position: absolute;
display: inline;
background-size: cover;
}
.cont {
border: 2px solid #033f47;
background: #021a1e;
border-radius: 5px;
margin: 25px auto;
overflow: scroll;
overflow-x: hidden;
width: 790px;
height: 600px;
-moz-box-shadow: 0px 0px 5px rgba(4, 47, 53, 0.83);
-webkit-box-shadow: 0px 0px 5px rgba(4, 47, 53, 0.83);
box-shadow: 0px 0px 25px rgba(4, 47, 53, 0.83);
position: absolute;
display: inline-block;
background-size: cover;
}
.yellow_text {
color: #ccc1a0;
width: 790px;
height: 50px;
margin: -30px auto ;
position: relative;
text-align: left;
padding: 13px ;
border: 2px solid #033f47;
background: #03232a;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px rgba(4, 47, 53, 0.83);
-webkit-box-shadow: 0px 0px 5px rgba(4, 47, 53, 0.83);
box-shadow: 0px 0px 25px rgba(4, 47, 53, 0.83);
}
最佳答案
我从您的网站进行了一些调整。尝试将.cont
的height
更改为calc(100vh - 300px)
。
.cont {
height: calc(100vh - 300px);
}
它获取浏览器的窗口高度并将其减去到
300px
(只是一个测试值,但它可以工作)。