个人中心
gpt4 book ai didi

javascript - 我们网站的页脚在桌面版而非移动版上消失了，但相关的 HTML/CSS 没有改变

转载 作者：行者123 更新时间：2023-11-30 11:01:35 24 4
gpt4 key购买 nike

我的小型图书馆有一个网站，该网站是由前任员工使用 HTML 和 CSS 创建的。我知道网站的显示是根据屏幕大小动态显示的——移动网站与桌面网站略有不同。看来他也使用了 JQuery 中的一些库。我的编码背景非常有限，所以我只做了很小的内容更改，没有功能更改。在某个时候，当我在度假时，我们网站的页脚停止在网站的桌面版本中显示，但它仍然显示在移动网站中。

我已经根据存档文件审核了 HTML 和 CSS 文件，以确保我在离开之前没有无意中做出任何更改。我检查了很少使用的文件版本，发现它们自 2017 年以来就没有更改过。我注释掉了 CSS 并只在本地运行 HTML 以查看是否存在我遗漏的样式表差异(尽管我没有编辑了它们)，但我无法在页脚中显示任何内容。页脚有一个小部件，显示一个带另一个网站链接的 iframe，第二个带日历链接的 iframe，以及一组带我们合作伙伴链接的图标。同样，一个月前在移动和桌面网站上一切正常，如果我将桌面浏览器调整到非常窄的尺寸，我可以查看页脚。

这是相关的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109165971-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-109165971-1');
</script>
<meta charset="UTF-8">
    <meta name="msvalidate.01" content="63DD6F645CCF71531665417F6978B20A" />
    <title>Welcome to the Toccoa-Stephens County Public Library</title>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Welcome the Toccoa Stephens County Library! Celebrating 80 years of operation and still going strong!" />
    <meta name="keywords" content="Toccoa-Stephens County Public Library, Northeast Georgia Public Libraries, search catalog, account, events, hours, new books, Toccoa, library, Friends of the Library, Stephens County, opac, steam, 3d printing, makerspace, state park pass" />
    <meta name="robots" content="index, follow" />
    <meta name="author" content="Literati Ltd" />
    <link rel="stylesheet" type="text/css" href="css/tabs.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link href='css/fullcalendar.min.css' rel='stylesheet' />
    <link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
</head>

<body>

  <!--header-->
  <header>
   <!--insert a lot of contents organized into tabs-->

<!--End Navigation tabs,begin accordion. tabs.css media queries will cause tabs to display:none at 500px and accordion to display. 
Any information added to tabs must be duplicated in the accordion-->


  <div class="container">


    <!--Home-->
   <!--insert a lot of contents organized into accordion tabs-->    



<footer>

    <div class="widgets">

    <div class="new-books">
      <iframe id="newbooks" src="https://gapines.org/opac/extras/browse/html-full/item-age/NEG-TOCCOA/1/5"></iframe>
        </div>
    <div id="tscpl-calendar">
      <iframe id="calendar" src="https://teamup.com/ksx6i3x71k3mbbkzbk?view=a&disableSidepanel=1&showLogo=0&showHeader=0&showTitle=0&showViewSelector=0"></iframe>
        <div id="bottom-right"><a href="calendar.html"><strong>SEE ALL EVENTS</strong></a>  </div>
    </div>  
      </div>

</div>


<div id="social">
  <h3>More to See!</h3>
  <a href="https://www.facebook.com/toccoastephenscountypubliclibrary/" target="_blank"><img class="socialpics" src="images/facebook.png" title="LIKE US ON FACEBOOK!" alt="LIKE US ON FACEBOOK!" /></a>
  <a href="https://my.nicheacademy.com/api/widgetCarousel/toccoa-stephenslibrary/load" target="_blank"><img class="socialpics" src="images/niche.png" title="TUTORIALS FOR OUR DIGITAL SERVICES" alt="TUTORIALS FOR OUR DIGITAL SERVICES" /></a>
  <a href="https://www.galileo.usg.edu/express?link=ztbo" target="_blank"><img class="socialpics" src="images/tumblebook.png" title="MORE EBOOKS FOR KIDS!" alt="MORE EBOOKS FOR KIDS!" /></a>
  <a href="https://www.galileo.usg.edu/express?link=zkpl" target="_blank"><img class="socialpics" src="images/novelist.png" title="FIND A GOOD RECOMMENDATION WITH NOVELIST" alt="FIND A GOOD RECOMMENDATION WITH NOVELIST" /></a>
    </div>  


</footer>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<p align="right">E-Verify ID#792629</p>


<!--Javascript used-->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/tabs.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.min.js"></script>
<script src="js/agenda.js"></script>
<script src="https://my.nicheacademy.com/api/widget/toccoa-stephenslibrary"></script>

</body>
</html>

这是与该部分相关的主要 CSS 代码:

#social {
  width: 375px;
  height: 250px;
  float: right;
  text-align: center;
  margin-top: 1%;
  margin-right: 1%;
  background: rgba(255,255,255,0.5);
  overflow: hidden;
}

.socialpics {


display: inline-flex;
  margin: 15px 30px 0px 30px;
  width: 95px;
  height: 95px;
}

#newbooks {
  float:left;
  background-color: rgba(255,255,255,0.5);
  margin: 1%;
  height: 250px;
  width: 400px;
  overflow: auto;
}

#tscpl-calendar {
    margin-top: 1%;
    margin-left: .5%;
    display: inline-flex;
    float: left;
    width: 415px;
    height: 250px;
    position: relative;
}

#calendar {
  width: 415px;
  height: 225px;
  float: left;
  margin: 1%;
  background: rgba(255,255,255,0.5);
  overflow: auto;
}

#bottom-right {
  right: 0;
  bottom: 0;
  position: absolute;
}

#tscpl-calendar a:link {
    background-color: #379676;
    color: white;
}

#tscpl-calendar a:visited {
    background-color: #379676;
    color: white;
}

@media only screen and (max-width : 800px) {
  .gapines {
    float: left;
    text-align: left;
    margin-left: 10px;
}
}

@media only screen and (max-width : 500px) {
  .gapines {
    width: 100%;
    text-align: center;
    margin-left: 0;
}

.new-books {
  margin-top: 10px;
  position: relative;
  height: 0;
  -webkit-overflow-scrolling: touch !important;
  overflow: scroll !important;
  padding-bottom: 125%;
  background-color: rgba(255,255,255,0.5);
}
.new-books iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#tscpl-calendar {
    width: 100%;
    margin: 0;
}

#calendar {
  width: 100% !important;
  margin: 0 !important;
}

#social {
  width: 100%;
  margin: 0;
}
}

.after-box {
    clear: both;
}

@media only screen and (min-width: 800px) and (max-width : 1279px) {
  #tscpl-calendar{
    float:left;
    margin-top: 5px;
    overflow: scroll;
    display: block;
    max-width: 35%;
    min-width: 25%;
  }

  #calendar {
    float:left;
    margin-top: 5px;
    overflow: scroll;
    display: block;
    max-width: 99%;
    min-width: 40%;
    background-color: rgba(255,255,255,0.5);
  }
  .new-books{
    float:left;
    margin-top: 5px;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 32%;
    display: block;
    max-width: 50%;
    min-width: 35%;
    background-color: rgba(255,255,255,0.5);
  }

  .new-books iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  #social {
    max-width: 45%;
    max-width: 25%;
    margin-top: 5px;
    display: block;
    float: left;
  }
  .socialpics {
    display: inline-block;
    margin: 0;
    margin-top: 2%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 501px) and (max-width : 799px) {
 #tscpl-calendar {  
    float:left;
    margin-top: 5px;
    overflow: auto;
    display: block;
    max-width: 100%;
    min-width: 95%;
  }

 #calendar {
    float:left;
    margin-top: 5px;
    overflow: auto;
    display: block;
    max-width: 100%;
    min-width: 95%;
    background-color: rgba(255,255,255,0.5);
  }
  .new-books{
    float:left;
    margin-top: 5px;
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 30.50%;
    display: block;
    max-width: 100%;
    min-width: 90%;
    max-height:100%;
    background-color: rgba(255,255,255,0.5);
  }

  .new-books iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  #social {
    max-width: 100%;
    min-width: 90%;
    display: block;
    float: left;
  }
  .socialpics {
    display: inline-block;
    max-width: 100%;
  }
}

还有另一个 CSS 文件，但我认为它不太相关。但是，我绝对是新手，所以如果缺少什么，请告诉我。此外，我可能需要包含一些与 JavaScript 相关的内容。如果我错过了，请告诉我。

我希望我的页面显示页脚，无论访问它的设备如何。我还需要具体说明来修复任何编码错误，即使您必须向我指出“傻瓜版”资源。我们这里没有真正的程序员，但我们有很多书。

根据评论者的评论，另一个 CSS 文件很重要，所以这是一个缩小版:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}


.tabs {
  margin-top: .5%;
    margin-left: 1%;
    margin-right: 10%;
  position: relative;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
  width: 98%;
    opacity: 1;
    height: 485px;
    margin-bottom: .5%;
}

.tabs nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #379676;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
  width: 150px;
  height: inherit;
}

.tabs nav a {
  padding: 15px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}


.tabs .content {
  padding: 15px 0px;
  position: absolute;
  top: 2px;
  left: 150px;
  color: #2b2626;
  background: rgba(255,255,255,0.5);
  width: 0px;
  height: 100%;
  overflow: scroll;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}


.tabs .content.visible {
  padding: 20px;
    background-color: #ffffff;
  width: calc(100% - 150px);
  opacity: .87;
}

.tabs .content p { padding-bottom: 1px; }

.tabs .content p:last-of-type { padding-bottom: 0px; }

/* Beginning of Accordion nav */

.container {
  width: 100%;
  max-width: 500px;
}

.accordion {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}

.accordion input {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -999;
}

.accordion label {
  display:block;
  padding: 15px 20px;
  background: #379676;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
  margin-bottom: 3px;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: all .40s;
}

.accordion-content {
  text-align: center;
  background-color: #ffffff;
  opacity: .87;;
  margin: 1em 0;
  text-decoration: none;
}

.accordion input:checked ~ .accordion-content {
  max-height: 600px;
  overflow: scroll;
}

@media only screen and (max-width: 500px) {
  .tabs {display: none;
  height: 0px;}
}

@media only screen and (min-width: 501px) {
  .container {display: inline-flex;
  height: 0px;}
}

基本上，如果您在移动网站上，侧面的选项卡都会折叠，直到您触摸其中一个，但页脚始终显示。

最佳答案

更新:看了网站，有解决办法:

正如另一位用户也指出的那样，您在 中，有一个媒体查询将其设置为“显示:无；”。这意味着其中的任何内容都将隐藏在那些特定于媒体的屏幕尺寸上。

一个解决方案是采取

<footer> ... </footer>.

然后像这样把它放在结束的 body 标签之前......

        <footer>
            <div class="widgets">
                <div class="new-books">
                    <iframe id="newbooks" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/5.html"></iframe>
                </div>
                <div id="tscpl-calendar">
                    <iframe id="calendar" src="Welcome%20to%20the%20Toccoa-Stephens%20County%20Public%20Library_files/ksx6i3x71k3mbbkzbk.html" class="fc fc-unthemed fc-ltr">
                        <div class="fc-toolbar fc-header-toolbar">
                            <div class="fc-left">
                                <h2>&nbsp;</h2>
                            </div>
                            <div class="fc-right">
                                <button type="button" class="fc-today-button fc-button fc-state-default fc-corner-left fc-corner-right">today</button>
                                <div class="fc-button-group">
                                    <button type="button" class="fc-prev-button fc-button fc-state-default fc-corner-left">
                                        <span class="fc-icon fc-icon-left-single-arrow"></span>
                                    </button>
                                    <button type="button" class="fc-next-button fc-button fc-state-default fc-corner-right">
                                        <span class="fc-icon fc-icon-right-single-arrow"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="fc-center">

                            </div>
                            <div class="fc-clear">

                            </div>
                        </div>
                        <div class="fc-view-container">
                            <div class="fc-view fc-listMonth-view fc-list-view fc-widget-content">
                                <div class="fc-scroller" style="overflow: hidden auto;">
                                </div>
                            </div>
                        </div>
                    </iframe>
                    <div id="bottom-right">
                        <a href="https://www.toccoastephenslibrary.org/calendar.html"><strong>SEE ALL EVENTS</strong></a>
                    </div>
                </div>  
            </div>
        </footer>

    </body>
</html>

这会将页脚从隐藏在桌面上的容器中取出。

关于javascript - 我们网站的页脚在桌面版而非移动版上消失了，但相关的 HTML/CSS 没有改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57531264/

24 4 0
文章推荐： ios - 使用 PhotoEditorSDK 构建图像框架
文章推荐： java - boolean 值不会WHILE循环java编程
文章推荐： javascript - Google Firestore - 如何在一次往返中通过多个 ID 获取多个文档？
文章推荐： java - 获取 NullPointException，不确定原因 - 尝试扫描文件并写入字符串数组
行者123
个人简介

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

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