个人中心
gpt4 book ai didi

javascript - 调整 div 高度，使其始终适合页面

转载 作者：太空宇宙 更新时间：2023-11-04 12:28:17 25 4
gpt4 key购买 nike

大家好，我正在尝试调整 DIV 的大小以始终适合我页面的 90%。我有一个页脚 (.kontakt)，我希望它始终位于屏幕底部，因此我需要我的 DIV 进行缩放(如果它太大，页脚在我滚动时不会移动)。我正在使用 jquery 将外部 html 文件加载到我的 div 上，并且 div 总是调整大小以适应内容。问题是，我不想在 css 中设置最大高度、最小高度，但希望每次调整浏览器窗口大小时 div 都调整大小。

是否有一个我没有找到的简单解决方案，我可以编写一个函数来实现吗？我可以使用什么事件处理程序来触发浏览器窗口调整大小？

我想我可以只在页脚上使用 position:fixed(如果它有效还没有真正尝试过)但我更愿意在我的 div 上使用滚动条(因此溢出:auto;)而不是在浏览器窗口中滚动。感谢您的帮助

$(document).ready(function() {
  $('.content').load('pages/test.html');
  console.log("content loaded");

  $(".kontakt").hover(
    function() {
      $(".kontakt").width("20%");
      $(".kontakt").css("margin-left", "40%");

      $(".kontakt").append("<a class='kontakttext'>mobitel: 031-535-919</a>");
      $(".kontakt").append("<br><a class='kontakttext'>stacionarni tel.: 01-3664-515</a><br>");
      $(".kontakt").append("<br><a class='kontakttext'>email: </a><a class='kontaktmail' href='mailto:sustersic_miha@hotmail.com'>sustersic_miha@hotmail.com</a><br>");
      $(".kontakt").append("<br><a class='kontakttext'>Visoko 19<br>1292 Ig<br>Slovenija</a>");
    },
    function() {
      $(".kontakt").empty();
      $(".kontakt").width("10%");
      $(".kontakt").css("margin-left", "45%");
      $(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
    });
  $(".menubutton").hover(
    function() {
      $(this).css("color", "#cccccc");
      $(this).prev().css("color", "#cccccc");
      $(this).next().css("color", "#cccccc");
    },
    function() {
      $(this).css("color", "#ffffff");
      $(this).prev().css("color", "#ffffff");
      $(this).next().css("color", "#ffffff");
    });

});
body {
  margin: 0;
  font-family: verdana;
  background-image: url("images/background_test.jpg");
  background-size: cover;
}
.topmenu {
  width: 90%;
  margin: auto;
  background-color: #000066;
  border-radius: 0px 0px 10px 10px;
  text-align: center;
  opacity: 0.7;
}
.menubutton {
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  background-color: #000066;
  color: #ffffff;
  font-weight: bolder;
  padding: 2px;
}
.activatedmenubutton {
  background-color: #cccccc;
}
.menubreak {
  background-color: #000066;
  display: inline-block;
  color: #ffffff;
  padding: 2px;
}
.kontaktlabel {
  font-weight: bolder;
}
.kontaktlabelbox {
  background-color: #000066;
  color: #ffffff;
  margin-top: 6px;
  margin-bottom: 5px;
}
.kontakttext {
  font-size: 0.7em;
  background-color: #000066;
  color: #ffffff;
}
.kontaktmail {
  font-size: 0.7em;
  text-decoration: none;
  color: #999999;
}
.content {
  margin: auto;
  width: 80%;
  min-height: 200px;
  overflow: auto;
  border: 1px solid black;
}
.kontakt {
  position: absolute;
  bottom: 0;
  width: 10%;
  margin-left: 45%;
  background-color: #000066;
  color: #cccccc;
  border-radius: 10px 10px 0px 0px;
  text-align: center;
}
<!DOCTYPE html>

<html>

<head>
  <title>Iščem delo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="magic.js"></script>
</head>

<body>
  <div class="topmenu">
    <a class="menubreak" id="1">|</a
            ><a class="menubutton" id="iz">Izobrazba</a
            ><a class="menubreak" id="2">|</a
            ><a class="menubutton" id="zn">Znanja in Kompetence</a
            ><a class="menubreak" id="3">|</a
            ><a class="menubutton" id="izk">Izkušnje</a
            ><a class="menubreak" id="4">|</a
            ><a class="menubutton" id="pč">Prosti Čas</a
            ><a class="menubreak" id="5">|</a
            ><a class="menubutton" id="fo">Fotografije</a
            ><a class="menubreak" id="6">|</a>
  </div>
  <div class="content">
  </div>
  <div class="kontakt">
    <div class="kontaktlabelbox">
      <div class="kontaktlabel">Kontakt</div>
    </div>
  </div>
</body>

</html>

最佳答案

这使得 .contact 的高度始终等于窗口高度的 90%:

$(document).ready(function() {
  $('.content').load('pages/test.html');
  console.log("content loaded");

  $(".kontakt").hover(
    function() {
      $(".kontakt").width("20%");
      $(".kontakt").css("margin-left", "40%");

      $(".kontakt").append("<a class='kontakttext'>mobitel: 031-535-919</a>");
      $(".kontakt").append("<br><a class='kontakttext'>stacionarni tel.: 01-3664-515</a><br>");
      $(".kontakt").append("<br><a class='kontakttext'>email: </a><a class='kontaktmail' href='mailto:sustersic_miha@hotmail.com'>sustersic_miha@hotmail.com</a><br>");
      $(".kontakt").append("<br><a class='kontakttext'>Visoko 19<br>1292 Ig<br>Slovenija</a>");
    },
    function() {
      $(".kontakt").empty();
      $(".kontakt").width("10%");
      $(".kontakt").css("margin-left", "45%");
      $(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
    });
  $(".menubutton").hover(
    function() {
      $(this).css("color", "#cccccc");
      $(this).prev().css("color", "#cccccc");
      $(this).next().css("color", "#cccccc");
    },
    function() {
      $(this).css("color", "#ffffff");
      $(this).prev().css("color", "#ffffff");
      $(this).next().css("color", "#ffffff");
    });

});

$(window).load(function() { $(window).trigger('resize') });

$(window).resize(function() {
   h = $(window).height() * 0.9;
   $('.content').css({'height': h + 'px'});
});
body {
  margin: 0;
  font-family: verdana;
  background-image: url("images/background_test.jpg");
  background-size: cover;
}
.topmenu {
  width: 90%;
  margin: auto;
  background-color: #000066;
  border-radius: 0px 0px 10px 10px;
  text-align: center;
  opacity: 0.7;
}
.menubutton {
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  background-color: #000066;
  color: #ffffff;
  font-weight: bolder;
  padding: 2px;
}
.activatedmenubutton {
  background-color: #cccccc;
}
.menubreak {
  background-color: #000066;
  display: inline-block;
  color: #ffffff;
  padding: 2px;
}
.kontaktlabel {
  font-weight: bolder;
}
.kontaktlabelbox {
  background-color: #000066;
  color: #ffffff;
  margin-top: 6px;
  margin-bottom: 5px;
}
.kontakttext {
  font-size: 0.7em;
  background-color: #000066;
  color: #ffffff;
}
.kontaktmail {
  font-size: 0.7em;
  text-decoration: none;
  color: #999999;
}
.content {
  margin: auto;
  width: 80%;
  min-height: 200px;
  overflow: auto;
  border: 1px solid black;
}
.kontakt {
  position: absolute;
  bottom: 0;
  width: 10%;
  margin-left: 45%;
  background-color: #000066;
  color: #cccccc;
  border-radius: 10px 10px 0px 0px;
  text-align: center;
}
<!DOCTYPE html>

<html>

<head>
  <title>Iščem delo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="unicornsandrainbows.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="magic.js"></script>
</head>

<body>
  <div class="topmenu">
    <a class="menubreak" id="1">|</a
            ><a class="menubutton" id="iz">Izobrazba</a
            ><a class="menubreak" id="2">|</a
            ><a class="menubutton" id="zn">Znanja in Kompetence</a
            ><a class="menubreak" id="3">|</a
            ><a class="menubutton" id="izk">Izkušnje</a
            ><a class="menubreak" id="4">|</a
            ><a class="menubutton" id="pč">Prosti Čas</a
            ><a class="menubreak" id="5">|</a
            ><a class="menubutton" id="fo">Fotografije</a
            ><a class="menubreak" id="6">|</a>
  </div>
  <div class="content">
  </div>
  <div class="kontakt">
    <div class="kontaktlabelbox">
      <div class="kontaktlabel">Kontakt</div>
    </div>
  </div>
</body>

</html>

关于javascript - 调整 div 高度，使其始终适合页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27859434/

25 4 0
文章推荐： python - Emacs:如何阻止我的 Python 进程被 Ctrl-C 杀死
文章推荐： c++ - isAbstract 模板和 Visual Studio
文章推荐： Java UDP DatagramSocket 未收到 DatagramPacket
文章推荐： linux - Rsync 与 .dd.xz 文件
太空宇宙
个人简介

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

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