搜索
搜索

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

Rae Ian 发表于 Dev
46
雷伊恩

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

线框

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

溢出1

和

溢出2

这是我的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;页脚时，将不再具有查看功能。有什么棘手的方法吗？谢谢。

玛尼·卡帕里（Mani Kapali）

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

对于溢出，我会用 

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

编辑html + css + js下拉导航栏

使用HTML CSS和JS拖动对象

如何修复Flexbox位置：修复了导航栏JS / CSS错误

HTML，CSS，JS未运行

HTML CSS / JS底部导航栏向上滑动

Manufacturing a Caclulator (HTML / CSS / JS)

制造Caclulator（HTML / CSS / JS）

CSS网格，具有全角页眉/页脚和较窄的主/边栏

导航栏不适用于所有部分（html，css，js）

带有HTML和CSS的多级悬停导航栏

在HTML和CSS中具有左，中和右的迷你导航栏

导航栏的HTML和CSS问题

CSS和JS问题

防止HTML形式的JS / CSS

带有Node.js Jade和Ajax的静态导航栏和页脚

具有图像的CSS和HTML导航栏列表

像使用CSS和JS的本机导航

CSS溢出问题（带有导航栏）

如何使用JS和CSS制作浮动导航栏？

导航栏的填充方法-表格/ CSS / JS

CSS-隐藏导航栏和页脚

如何使用html，css和js一起包含侧边栏和导航栏

如何使用js，html和css调整此代码，使其具有默认的折叠视图？

导航栏 HTML 和 CSS

滑块中的 img 溢出和过渡（HTML、CSS、JS）

过渡问题 CSS 和 JS

响应式导航栏：菜单不会消失（CSS 和 JS）

html css js 数学输出

在 html/CSS/JS 中拖放

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    用日期数据透视表和日期顺序查询

  3. 3

    应用发明者仅从列表中选择一个随机项一次

  4. 4

    Java Eclipse中的错误13，如何解决？

  5. 5

    在Windows 7中无法删除文件（2）

  6. 6

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  7. 7

    套接字无法检测到断开连接

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    有什么解决方案可以将android设备用作Cast Receiver？

  10. 10

    Mac OS X更新后的GRUB 2问题

  11. 11

    ggplot：对齐多个分面图-所有大小不同的分面

  12. 12

    验证REST API参数

  13. 13

    如何从视图一次更新多行（ASP.NET - Core）

  14. 14

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  15. 15

    计算数据帧中每行的NA

  16. 16

    检索角度选择div的当前值

  17. 17

    离子动态工具栏背景色

  18. 18

    UITableView的项目向下滚动后更改颜色，然后快速备份

  19. 19

    VB.net将2条特定行导出到DataGridView

  20. 20

    蓝屏死机没有修复解决方案

  21. 21

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

热门标签

归档