javascript - 使整个页面适合视口

问题描述

我试图让整个网站适合视口，所以不需要滚动。索引、音乐和联系人是主要的，因为其他 2 个页面链接到外部资源（到该站点的链接在帖子的底部）。

这些是我尝试过的，但都没有奏效。也许我执行不正确。

将主体设置为 100vh 的最大高度不起作用。我将整个页面包装在一个 div 中，并将其设置为 100vh 的最大高度，但它也不起作用。

这也不起作用

   html body {
   margin: 0;
   min-height: 100%;
}

与上面的选项相同，但这次使用 vh 而不是百分比

    html body {
   min-height: 100vh;
   position: relative; //the reason I added this one was so later on I can
                        make the footer sticky to the bottom of the page 
   margin: 0;
}

我还从另一个问题中找到了一个有人尝试过的 javascript（它只是将 css 添加到封面 div（或者对我来说是 body 标记或包含所有内容的 div 容器）以使 css 等于 100视口高度和宽度。
```
var vHeight = $(window).height(),
vWidth = $(window).width(),
cover = $('.cover');

cover.css({"height":vHeight,"width":vWidth});
```

这也不起作用。

关于如何实现这一目标的任何提示或线索？

网站链接：http: //www.instastatus.live/

编辑：

HTML

<div class="container-fluid">
<div class="row">
    <section id="intropage">
        <section id="container-banner">
            <div class="section first">
                <div class="cont_title">
                    <h1><a href="music.html">Music</a></h1>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1><a href="tour.html">Tour</a></h1>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1 class="font-weight-bold">Members<br>Only</h1>
                    <h3>Free Song<br>upon Sign-Up</h3>
                    <a href="http://www.holyrollerbaby.com/members/">
                        <button class="btn hoverable">Enter</button>
                    </a>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1><a href="https://holyrollerbabyofficialstore.bigcartel.com/">Store</a></h1>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1><a href="contact.html">Contact</a></h1>
                </div>
            </div>
        </section>



<div class="video-container">
    <video autoplay loop muted>
        <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4"
                type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="overlay-desc text-center">
        <h1 class="white-text">"Spread Your Love Around" <br>Music Video Out Now!</h1>
    </div>
    <div class="overlay-icons">
        <a href="https://www.facebook.com/holyrollerbaby/"><i class="fa fa-facebook"></i></a>
        <a href="https://www.instagram.com/holyrollerbaby/"><i class="fa fa-instagram"></i></a>
        <a href="https://www.youtube.com/channel/UC9xenomg5a4OcN0wz4X2msg?view_as=subscriber"><i class="fa fa-youtube"></i></a>
    </div>
</div>

CSS

/*===== Media ====*/
@media (max-width: 800px){
    #container-banner{
        height: 60vh;;
    }
    video{
        height: 40vh;
    }
}
@media (max-width: 640px){
    #container-banner{
        height: 70vh;;
    }
    video{
        height: 30vh;
        object-fit: cover;

    }
}
@media (width: 200px){
    #container-banner{
        height: 80vh;;
    }
    video{
        height: 20vh;
        object-fit: cover;
    }
}
    /*==== video description ===*/

.video-container {
    position: relative;

}
video {
    min-height: auto;
    vertical-align: middle;
    width: 100%;
    max-height: 50vh;
}
.overlay-desc {
    background: rgba(0,0,0,0);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: start;
    justify-content: center;
}
.overlay-icons {
    background: rgba(0,0,0,0);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


    /*home page*/
#container-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100vw;
}
#container-banner:hover > .section {
    -webkit-filter: brightness(22%);
    filter: brightness(22%);
}
#container-banner:hover > .section:hover {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}
#container-banner .section {
    flex-grow: 1;
    position: relative;
    height: 100%;
    transition: all 0.4s;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    flex: 1;
}
#container-banner .section .cont_title {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 15vh;
}
#container-banner .section .cont_title h1 {
    text-transform: uppercase;
    color: white;
    font-family: 'Economica', sans-serif;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
    font-size: 3.5vw;
    margin: 0;
    transition: font-size 0.3s;
    vertical-align: middle;
}
#container-banner .section .cont_title h3 {
    text-transform: uppercase;
    font-family: 'Economica', sans-serif;
    font-size: 1.3vw;
    transition: all 0.3s;
    color: white;
    letter-spacing: 3px;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}
#container-banner .section .cont_desc {
    position: relative;
    display: block;
    text-align: center;
    width: 12vw;
    height: auto;
    margin: auto;
    opacity: 0;
    transition: opacity 0.8s, padding-top 0.9s, -webkit-transform 0.7s;
    transition: opacity 0.8s, transform 0.7s, padding-top 0.9s;
    transition: opacity 0.8s, transform 0.7s, padding-top 0.9s, -webkit-transform 0.7s;
    padding-top: 6vh;
    -webkit-transform: scale(1);
    transform: scale(1);
}
#container-banner .section .cont_desc p {
    margin: 0;
    font-family: 'Economica', sans-serif;
    color: white;
    font-size: 16px;
}
#container-banner .section:hover {
    flex-grow: 1.8;
    transition: flex 0.2s;
}
#container-banner .section:hover > .cont_title h1 {
    font-size: 5.3vw;
    transition: font-size 0.4s;
}
#container-banner .section:hover > .cont_title h3 {
    font-size: 1.6vw;
    transition: all 0.4s;
}
#container-banner .section:hover > .cont_desc {
    opacity: 1;
    padding-top: 2vh;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    transition: opacity 0.7s, padding-top 0.5s, -webkit-transform 0.1s;
    transition: opacity 0.7s, padding-top 0.5s, transform 0.1s;
    transition: opacity 0.7s, padding-top 0.5s, transform 0.1s, -webkit-transform 0.1s;
    transition-delay: 0s, 0.1s, 0s;
}
#container-banner .section:nth-child(1) {
    background: url("../img/members/2nd-round.jpg") center;
}
#container-banner .section:nth-child(2) {
    background: url("../img/members/3rd-round.jpg") center;

}
#container-banner .section:nth-child(3) {
    background: url("../img/HRBAlbumCover.svg") center;
    object-fit: cover;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: black;
}
#container-banner .section:nth-child(4) {
    background: url("../img/members/3.jpg") center;
}
#container-banner .section:nth-child(5) {
    background: url("../img/members/4.jpg") center;
    object-fit: cover;
}

.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 100%;
    background-image: url("../HRB Album Cover.svg");
    background-position: center;

}
.cont_title h1 a{
    color:white;
    text-decoration: none;
}
.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
label{
    color: black;
}

.nav-link, .nav-item{
    font-size: 20px;
    color: var(--blue);
    font-family: ReginaBlack-Solid;
}
.regina-black-solid{
    font-family: ReginaBlack-Solid;
}


.nav-item a:hover{
    color: var(--yellow) !important;
}



.blue-text{
    color: var(--blue);
}

.yellow-text{
    color: var(--yellow);
}

标签： javascripthtmlcssbootstrap-4

javascript - 使整个页面适合视口

问题描述

解决方案

推荐阅读