个人中心
gpt4 book ai didi

javascript - CSS 侧边栏页脚检测

转载 作者：行者123 更新时间：2023-11-28 09:04:31 25 4
gpt4 key购买 nike

我需要侧边栏不要越过页脚导航。我不知道如何为此编辑 css。这是带有 html 和 css 的预览。所以我正在寻找的是页脚边框顶部的“碰撞”，以便侧边栏可以与之交互。 http://codepen.io/TheGamingHideout/pen/reayx

HTML:

  <html>

  <head>
    <title>Home - POG</title>
    <link rel="shortcut icon" href="http://www.thegaminghideout.com/pog/favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
  </head>

  <body>
    <div id="wrap">
      <div id="header">
        <h1><img src="http://www.thegaminghideout.com/pog/VexIMG/header.png" alt="Possessed Gaming" width="760" height="60"></h1>
      </div>
      <div id="navigation">
        <div class="navlinks">
          <div id="output2">
          </div>
        </div>
        <script src="nav.js"></script>
      </div>
      <div id="buttons">
        <img src="http://www.thegaminghideout.com/pog/VexIMG/donate.png">
      </div>
      <div id="body">
        <center>
          <h2>Welcome to Possessed Gaming DarkRP!</h2>
          <h4>Owned by PossessedGaming</h4>
        </center>
        <p>Thanks for choosing our GMod server! You are currently playing DarkRP on PossessedGaming. Make sure to read and follow the rules below!</p>
        <br>
        <h3>Rules</h3>
        <ul>
          <li>Do NOT RDM</li>
          <li>NLR 3 Minutes!</li>
          <li>Respect Staff</li>
          <li>Do NOT spam chat or mic</li>
          <li>Have Fun!</li>
        </ul>
        <p>Disobeying these rules or finding loopholes around them can and will result in punishments including kicks, bans, mutes, weapon strips, and jails.</p>
        <br>
        <p>Click <a href="application.php">here</a> to apply for staff!</p>
        <div id="latest">
          <center>
            <img src="http://www.thegaminghideout.com/pog/VexIMG/Index/latest.png">
            <p id="output1"></p>
            <script src="latest.js"></script></center>
        </div>
      </div>
      <div id="footer">
        <div id="copyright">
          Copyright © The Gaming Hideout
          <br>We own no rights on any game on this site unless otherwise noted.
          <br>All Rights Reserved.
        </div>
        <div id="footnav">
          <script src="footnav.js"></script>
        </div>
      </div>
    </div>
  </body>

</html>

CSS:

html, body  {
  margin: 0;
  padding: 0;

}
.hidden {
  display: none;
}
body {
  background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
  background-color: black;
  background-size: 100%;
  background-repeat: no-repeat;
  font-size: 12px;
  color: #666666;
}
@font-face {
  font-family: 'karmatic_arcaderegular';
  src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
  src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
    url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
    url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
    url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
    url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
  font-weight: normal;
  font-style: normal;

}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul  {
  color: white;
}
#wrap  {
  width: 760px;
  margin: auto;
  overflow: hidden;
}
#header {
  height: 60px;
  width: auto;
  background: #db6d16
    url(VexIMG/header.png);
}
#navigation  {
  width: 760px;
  height: 35px;
  position: absolute;
  border-bottom: 2px solid #000000;
  background: red;
  padding: 0px;
}
#navigation .padding  {
  padding: 2px;
}
#navigation .navlinks  {
  position: absolute;
  top: 1px; left: 0px;
}
#navigation .navlinks ul  {
  margin: 0px;
  padding: 0px;
  text-align: center;
  list-style-type: none;
  width: 760px;
  height: 35px;
}
#navigation .navlinks li {
  position: relative;
  top: 5px;
  margin: 0px 5px 0px 5px;
  list-style-type: none;
  display: inline;
}
#navigation .navlinks li a  {
  color: #000000;
  padding: 5px 0px 9px 0px;
  text-decoration: none;
  font-size: 18px;
  font-family: karmatic_arcaderegular;
  padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover  {
  margin: 0px;
  color: #ffffff;
  background: red;
  text-decoration: underline;  
}
#buttons  {
  padding-bottom: 2000px;
  margin-bottom: -2000px;
  width: 155px;
  border-left: 2px solid #FFA500;
  border-right: 2px solid #FFA500;
  float: right;
  font-family: Terminal, Arial, Times New Roman;
  background: linear-gradient(#700000, #250000);
}
#latest  {
  border: 1px ridge #FFA500;
  width: 300px;
  height: auto;
  background: linear-gradient(#000000, #252525, #000000);
  clear: left;
}
#latest p  {
  font-family: Times New Roman;

}
#body  {
  padding-top: 50px;
  width: 600px;
  font-family: Arial, Verdana, Terminal;
  font-size: 14px;
}
#body .secret img  {
  width: 150px;
  height: 100px;
  border: 2px solid black;
}   
#body .game  {
  padding: 3px 3px 10px 3px;
}
#body .game img  {
  align: center;
  float: left;
  width: 175px;
  height: 101px;
  border: 2px ridge #ff0000;
}
#body .game caption  {
  padding-left: 1px;
}
#body .space  {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 4px ridge red;
  border-bottom: 4px ridge red;
}
#body .game caption  {
  margin-top: 2px;
  float: right;
  font-family: Terminal, Arial, Verdana, San-Serif;
  font-size: 12px;
  color: #000000;
  border-bottom: 2px dashed #e9e9e9;
}
#body .game a  {
  font-family: Terminal, Arial, San-Serif, Tahoma;
  font-size: 10px;
  color: #c9c9c9;
  text-decoration: none;
}
#body .game a:hover  {
  font-family: Terminal, Arial, San-Serif, Tahoma;
  font-size: 10px;
  color: red;
  text-decoration: underline;
}
#footer  {
  width: 730px;
  height: 60px;
  font-family: Tahoma, Arial, Terminal, San-Serif;
  font-size: 10px;
  color: #c9c9c9;
  border-top: 1px solid #efefef;
  padding: 13px 25px;
  line-height: 18px;
}
#footer li  {
  padding: 0px 2px 0px 2px;
  float: right;
  display: inline;
  text-align: left;
  font-family: Terminal, Arial, San-Serif, Tahoma;                      
  font-size:; 10px;
}
#footer a  {
  font-family: Terminal, Arial, San-Serif, Tahoma;
  font-size: 10px;
  color: #c9c9c9;
  text-decoration: none;
}
#footer a:hover  {
  font-family: Terminal, Arial, San-Serif, Tahoma;
  font-size: 10px;
  color: red;
  text-decoration: underline;
}
#footer #footnav  {
  display: inline;
  width: 310px;
  float: right;
  text-align: left;
  position: relative;
  bottom: 65px;
}

最佳答案

添加 position: relative 到包装器并使用 position: absolute 定位#buttons 是解决此问题的一种方法。请记住，您需要知道#wrap 和#button 的顶部和底部之间的确切距离。

也就是说可能还有其他解决方案。

#wrap  {
  position: relative;
  width: 760px;
  margin: auto;
  overflow: hidden;
}
#buttons  {
  position: absolute;
  right: 0px;
  top: 110px;
  bottom: 95px;
  width: 155px;
  border-left: 2px solid #FFA500;
  border-right: 2px solid #FFA500;
  font-family: Terminal, Arial, Times New Roman;
  background: linear-gradient(#700000, #250000);
}

关于javascript - CSS 侧边栏页脚检测，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26765672/

25 4 0
文章推荐： jquery - 如何在段控件中居中 li 元素？
文章推荐： css - 如何更改 wordpress 中只有一页的 css？
文章推荐： php - 嵌入式 PHP 防止滚动
文章推荐： css - 如何在我的 dojo GridX 中将我的按钮置于我选择的特定列中？
行者123
个人简介

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

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