Question

在高分辨率屏幕上即可，所有内容均可查看：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);
}

Answer 1

你可以使用：

.your-div{
    height:100vh;
}

Answer 2

我从你的网站做了一些调整。尝试将.cont的{{1}}改为height。

calc(100vh - 300px)

它获取浏览器窗口高度并将其减去.cont { height: calc(100vh - 300px); }（只是一个测试值，但它可以工作）。

Answer 3

您可以使用flexbox轻松创建。我在ie和chrome中试过这个，它给了你网站的一些外观。这是一个简单的布局模拟，但它看起来很相似。

<html>

<head></head>

<style type="text/css">

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav {
    background-color: blue;
    height: 100px;
    min-height: 100px;
}

.wrapper div:not(.nav):not(.footer):not(.ov-top) {
    flex: 1 1 0;
}

.ov-top {
    flex: 3 1 0;
    background-color: black;

    display: flex;
    flex-direction: column;

}

.content {
    margin: 0 auto;
    background-color: red;
    width: 1000px;
    height: inherit;
    overflow-y: auto;
}

.footer {
    height: 100px;
    min-height: 100px;
    background-color: blue;
}

</style>

<body>
    <div class="wrapper">
        <div class="nav"></div>

        <div></div>

        <div class="ov-top masthead">
            <div class="content center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </div>
        </div>


        <div></div>

        <div class="footer"></div>

    </div>


    </div>
</body>

如何设置div高度以适应屏幕css

3 个答案: