html - 如何设置div高度以适合屏幕css

Question

在高分辨率屏幕上没问题，所有内容都可见:http://prntscr.com/bo3rf4

但分辨率较低:http://prntscr.com/bo3rmw下面的内容被页脚覆盖隐藏了

我想用 css 让它适应屏幕大小我也不想让 body 溢出我尝试设置背景大小来覆盖但没有任何反应

您可以在以下位置找到源代码: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);
}

Answer 1

我在您的网站上做了一些调整。尝试将 .cont 的 height 更改为 calc(100vh - 300px)。

.cont {
    height: calc(100vh - 300px);
}

它获取浏览器窗口高度并将其减去 300px(只是一个测试值，但它有效)。