Hotshot Hotshot - 5 months ago 21
HTML Question

How to set div height to fit the screen css

on high resolution screen it is ok and all content is viewable: http://prntscr.com/bo3rf4

but on lower resolution :http://prntscr.com/bo3rmw
the content below is hidden with footer overlay

and I want to make it fit to screen size with css
also I don't want to make overflow of body
i tried bacground-size setting to cover but nothing happen

you can find source on : ttp://devserv.5gbfree.com/eune.html - i cant add more than 2 links so make it 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>




.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

I do some tweaking from your site. Try changing your .cont's height to calc(100vh - 300px).

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

It gets the browsers window height and subtract it to 300px (just a test value but it works).

Comments