个人中心
gpt4 book ai didi

jquery - 折叠DIV底部到顶部

转载 作者：行者123 更新时间：2023-11-28 08:44:53 25 4
gpt4 key购买 nike

我不确定如何解释这一点，但我想尝试获得两个链接，单击它们会滚动一个隐藏的 <div>最多填满父级的全高<div> .当我尝试使用 <BODY> 的全高时遇到问题相反？

    html, body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #333;
      background: rgba(0, 109, 189, 1);
      height: 100vh;
      width: 100vw;
      font-family: Calibri, Calibri, Arial, Helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
    }
    p {
      padding: 10px;
    }
    a {
      text-decoration: none;
      color: blue;
      border: 1px solid rgba(153, 222, 253, 0);
      border-radius: 2px;
    }
    a:hover {
      background: -webkit-linear-gradient(top, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      background: -o-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      background: -moz-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      background: linear-gradient(to bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
    }
    a.nav {
      text-decoration: none;
      color: blue;
      border: 1px solid rgba(153, 222, 253, 0);
    }
    a.nav:hover {
      background: -webkit-linear-gradient(top, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      background: -o-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      background: -moz-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      background: linear-gradient(to bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
      border: 1px solid rgba(53, 22, 53, 1);
    }
    a.dull {
      text-decoration: none;
    }
    #nav {
      /* Left Column */
      margin-top: 5px;
      border-radius: 5px 0px 0px 0px;
      margin-left: 5px;
      margin-bottom: 5px;
      margin-right: 0px;
      line-height: 30px;
      background-color: rgba(24, 24, 24, 1);
      width: 200px;
      border-right: 5px solid rgba(13, 16, 18, 1);
      height: calc(100% - 100px);
      height: -webkit-calc(100% - 70px);
      height: -moz-calc(100% - 70px);
      float: left;
      color: black;
    }
    #footer-nav {
      background: -webkit-linear-gradient(top, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
      background: -o-linear-gradient(bottom, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
      background: -moz-linear-gradient(bottom, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
      background: linear-gradient(to bottom, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
      width: 197px;
      font-family: Segoe UI, Arial, Helvetica, sans-serif;
      font-size: 7.5pt;
      font-weight: bold;
      height: 28px;
      position: fixed;
      bottom: 5px;
      padding-left: 3px;
      color: #black;
      white-space: nowrap;
      overflow: hidden;
      border-bottom: #7494ad solid 1px;
    }
    #footer-nav:hover {
      background: -webkit-linear-gradient(top, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
      background: -o-linear-gradient(bottom, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
      background: -moz-linear-gradient(bottom, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
      background: linear-gradient(to bottom, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
      width: 197px;
      font-family: Segoe UI, Arial, Helvetica, sans-serif;
      font-size: 7.5pt;
      font-weight: bold;
      height: 28px;
      position: fixed;
      bottom: 5px;
      padding-left: 3px;
      color: #black;
      white-space: nowrap;
      overflow: hidden;
      border-bottom: #7494ad solid 1px;
      cursor: pointer;
    }
    #text {
      position: relative;
      top: -4px;
    }
    
    #container {
      bottom: 5px;
      display: none;
      left: 5px;
      position: fixed;
      width: 200px;
    }
    #inner {
      background-color: rgba(20, 7, 7, .4);
    }
    #container2 {
      bottom: 5px;
      display: none;
      left: 20px;
      position: fixed;
      width: 90%;
    }
    #inner2 {
      background-color: #F0F0F0;
      border: 1px solid #666666;
      border-bottom-width: 0px;
      padding: 20px 20px 100px 20px;
    }
<!DOCTYPE html>
<html>

<head>
  <title>CSS Portal - Layout</title>
  <link rel="stylesheet" type="text/css" href="css/coll.css" />
  <script type='text/javascript'>
    //<![CDATA[ 
    window.onload = function() {} //]]>
  </script>

  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript">
    // When the DOM is ready, initialize the scripts.
    jQuery(function($) {

      // Get a reference to the container.
      var container = $("#container");

      // Bind the link to toggle the slide.
      $("#nav").on("click", "#text",
        function(event) {
          // Prevent the default event.
          event.preventDefault();

          // Toggle the slide based on its current
          // visibility.
          if (container.is(":visible")) {
            // Hide - slide up.
            container.slideUp(200);
          } else {
            // Show - slide down.
            container.slideDown(200);
          }
        }
      );

      // Get a reference to the container.
      var container2 = $("#container2");

      // Bind the link to toggle the slide.
      $("#nav").on("click", "#text2",
        function(event) {
          // Prevent the default event.
          event.preventDefault();

          // Toggle the slide based on its current
          // visibility.
          if (container2.is(":visible")) {
            // Hide - slide up.
            container2.slideUp(200);
          } else {
            // Show - slide down.
            container2.slideDown(200);
          }
        }
      );
    });
  </script>

</head>

    <body>

	<div id="nav">
    	<div id="heading-nav">
			A
		</div>
		<div id="container">
			<div id="inner">
				A
			</div>
		</div>
		<div id="container2">
			<div id="inner2">
				B
			</div>
		</div>
		<div id="footer-nav">
			<div id="text">B</div>
		</div>
    </div>
</body>
   </html>

任何关于如何实现这一目标的想法将不胜感激!

最佳答案

请把它放在你的CSS中

html, body {
    margin: 0 auto;
}

关于jquery - 折叠DIV底部到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27634989/

25 4 0
文章推荐： Javascript 返回过去 6 个月，然后使用每个月作为变量
文章推荐： ios - Swift 2.1 - 将信息输入到同时填充文本字段的 TextView 中？
文章推荐： javascript - 处理主干中的移动屏幕方向
文章推荐： javascript - 使 Div 的子级在 html 中显示在另一个之上
行者123
个人简介

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

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