Question

这是我需要实现的布局。具有页脚和导航栏的全屏轮播：

我几乎已经完成了这个任务，但是我找不到一个棘手的方法来实现它。因为有溢出。这是我当前的输出：

和

这是我的html代码：

    <!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title>Cyclehouse MNL</title>
    <meta name="description" content="">
    <meta name="msapplication-tap-highlight" content="yes" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />

    <!-- Google Web Font -->
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'>

    <!--  Bootstrap 3-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- OWL Carousel -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">

    <!--  Slider -->
    <link rel="stylesheet" href="css/jquery.kenburnsy.css">

    <!-- Animate -->
    <link rel="stylesheet" href="css/animate.css">


    <!-- Loader Style -->
    <link rel="stylesheet" href="css/loader-2.css">

    <!-- Costum Styles -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">

    <!-- Favicon -->
    <link rel="icon" type="image/ico" href="favicon.ico">

    <!-- Full Height -->
    <style>
        html,
        body {
            height: 100%;
        }
    </style>

</head>

<body>

      <!-- Preloader -->
    <div class="cover"></div>

   <!-- Navigation section -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">

        <div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon icon-bar"></span>
            <span class="icon icon-bar"></span>
            <span class="icon icon-bar"></span>
          </button>
        <img src="img/cyclehouselogo.png" alt="Logo" style="width:300px;height: 50px;margin-top:10px;"/>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="index.html" class="cool-link">HOME</a></li>
            <li><a href="about.html" class="cool-link">ABOUT</a></li>
            <li><a href="instructor.php" class="cool-link">INSTRUCTOR</a></li>
            <li><a href="cyclewithus.html" class="cool-link">CYCLE WITH US</a></li>
            <li><a href="#" class="cool-link">LOGIN</a></li>
            <li><a href="bookschedules.html" class="cool-link">RIDE NOW</a></li>
          </ul>
        </div>

      </div>
    </div>

    <div class="slider-container">
        <div class="slider-control left inactive"></div>
        <div class="slider-control right"></div>
        <ul class="slider-pagi"></ul>
        <div class="slider">
            <div class="slide slide-0 active">
                <div class="slide__bg" style="background-image: url('img/full-slider/image_7.jpg');background-position: top; background-size:cover;"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 1 1" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                    <br>
                    <Br>
                        <h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
                    </div>
                </div>
            </div>

            <div class="slide slide-1">
                <div class="slide__bg" style="background-image: url('img/full-slider/image_5.jpg');background-position: center; background-size:cover;"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">

                       <h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
                    </div>
                </div>
            </div>

            <div class="slide slide-2">
                <div class="slide__bg" style="background-image: url('img/full-slider/image_9.jpg');background-position: center; background-size:cover;"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                        <h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
                    </div>
                </div>
            </div>

        </div>
    </div>

   <div class="footer">
    <div class="container">
        <div class="row" style="float:right;">

              <a class="footer-link" onClick="window.location.href='https://www.eliteboxing.com.ph'"><b>ELITE BOXING ·</b></a>  
                <b>PARTNER WITH US ·</b>
               <b>TERMS AND CONDITION ·</b>
               <b>FAQS ·</b>
                <b>CONTACT US</b>

        </div>
    </div>
</div>

    <script src="js/vendor/jquery-1.11.2.min.js"></script>
    <script src="js/vendor/pace.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/ef-slider.js"></script>
    <script src="js/vendor/owl.carousel.min.js"></script>
    <script src="js/vendor/wow.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

如果您注意到我的CSS代码：

        <!-- Full Height -->
    <style>
        html,
        body {
            height: 100%;
        }
    </style>

高度设置为100％，但是当我尝试放置overflow:hidden;时，页脚将不再具有查看功能。有什么棘手的方法吗？谢谢。

Answer 1

这几天我用身高：100vh；对于任何需要高度为100％的元素，而不是将其放在HTML和Body标签中。

对于溢出，我将使用

.slider-container{
    height: calc(100vh - HEADERpx - FOOTERpx;
}

无溢出：具有页脚和导航栏的全屏轮播HTML CSS JS

1 个答案: