个人中心
gpt4 book ai didi

html - 创建多个全屏div

转载 作者：行者123 更新时间：2023-11-28 15:55:55 24 4
gpt4 key购买 nike

我正在尝试创建一个单页网站，其中包含多个全屏 div，但我无法将它们全屏显示。我已经在使用 bootstrap 使网站响应，这是我第一次这样做。我想做的是设置一个背景视频，然后当我向下滚动时，div 适合整个视口(viewport)

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="imagens/logo_icone.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <title>Museu do Barro Preto</title>

</head>

<body>  
<div class="container-fluid">
                          <!--Video -->
<div class="row">
<div class="col-xs-12">
    <video class="video_bg" autoplay muted loop>
        <source src="video/prom.mp4" type="video/mp4">
        A extensão do ficheiro não é suportada pelo seu browser
    </video>
    </div>
      </div>
     <!--/Video -->

  <!--Barra de Navegação-->
    <div class="row">
    <header class="col-md-12">
        <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#texto1">Quem Somos</a></li>
            <li><a href="">Onde Estamos</a></li>
            <li><a href="">Educação</a></li>
            <li><a href="">Video</a></li>
            <li><a href="">Exposições</a></li>
      </ul>
    </div>
    </div>
        </nav>
    </header>
</div>
<!--/Barra de Navegação-->

<div class="row pag1">
    <article class="col-md-8">
        <section>
            <h1>Quem Somos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.

Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
        </section>
    </article>

    <aside class="col-md-4">
        <img src="http://www.dueceira.pt/trilhos/imgs/barro_preto_vnp2.jpg" alt="Peças Barro Preto">
    </aside>
</div>

<div class="row">
    <article>
        <aside class="col-md-4">

        <div id="mapa">

        </div>
    </aside>

        <section class="col-md-8">
                        <h1>Onde Estamos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.

Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
        </section>
    </article>
</div>

<div class="row">
    <div id="ilustracao">
        <h1>SLIDESHOW DAS ILUSTRAÇÕES</h1>
    </div>
</div>

<div id="video">
    <div id="documentario">
    <h1>Documentario</h1>
        <video class="documentario" controls>
            <source src="video/prom.mp4" type="video/mp4">
        </video>
    </div>
</div>

        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script>

    </body>

</html>

CSS

html,body {
  height:100%;
  margin:0;
}

html>body .pag1 {
  height:auto;
}
.video_bg { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}

 .borders {
    border: 1px solid black;
 }

 .documentario {
    width: 500px;
    height: 500px;
 }

 .pag1 {
    width: 100%;
    height: 100%;
    margin-top: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
 }

 .pag1 img {
    width: 400px;
    height: 400px;
 }

最佳答案

试着给你的 div 一个 vh 样式。比如

div {max-height:100vh;}//这将使您的 div 的最大高度为 100 垂直高度，设置为全屏大小。

http://www.w3schools.com/cssref/css_units.asp

关于html - 创建多个全屏div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41152887/

24 4 0
文章推荐： ios - 如何从左到右和向后缩放 UIView？
文章推荐： javascript - jQuery slideUp ("slow"), 但总是显示在桌面屏幕上
文章推荐： javascript - 如何将 id 转换为小写？
文章推荐： javascript - 如何在javascript中回到数组的开头
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com