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

时间：2015-01-09 11:20:50

标签： javascript jquery html css

嘿伙计们我试图让DIV调整大小以便始终适应我页面的90％。我有一个页脚（.kontakt），我总是想定位在屏幕的底部，所以我需要我的DIV进行扩展（如果它太大，页脚不会移动当我滚动）。我使用jquery将外部html文件加载到我的div上，并且div总是调整大小以适应内容。问题是，我不想在css中设置max-height，min-height，但是每次调整浏览器窗口大小时都希望div调整大小。

有没有一个简单的解决方案可以做到我找不到的，我可以编写一个功能吗？ 我可以在浏览器窗口调整大小时使用哪个事件处理程序？

我想我可以只使用位置：固定在页脚上（如果它有效的话，它实际上已经尝试了）但是我喜欢在我的div上使用滚动条（因此溢出：auto;）而不是滚动浏览器窗口。谢谢你的帮助

＆＃13;
＆＃13; 
$(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");
    });

});
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

这使得.contact的高度始终等于窗口高度的90％：

＆＃13;
＆＃13; 
$(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'});
});
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

@John Kapantzakis已经提供了解决方案，但我会尝试在这里给你一个非js解决方案！ 〜如果你想了解这个诀窍，请告诉我。 P.S这个解决方案确实将布局保持在90％但足够的页脚有自己的负面区域。继续玩它，让我知道它是否是你想要的。

＆＃13;
＆＃13; 
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;
  height: 100%;
  overflow: auto;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.kontakt {
    background-color: #000066;
    border-radius: 10px 10px 0 0;
    bottom: 0;
    color: #cccccc;
    display: inline-block;
    margin: 10px auto 0;
    padding: 0 7px;
    position: static;
    text-align: center;
}
body, html{ height: 100%; }
.t-layout{ display: table; width: 100% }
.t-layout--full{ height: 100%; }
.t-row{ display: table-row; }
.t-col{ display: table-cell; }
.t-col--top{ vertical-align: top; }
.t-col--mid{ vertical-align: middle; }
.t-col--bot{ vertical-align: bottom; }
.t-col--compress{ height: 1px; }
.t-a-c{ text-align: center; }
.content-wrap{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow-y: auto;}
.relative{ position: relative; }
＆＃13; 
<!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="t-layout t-layout--full">
      <div class="t-row">
        <div class="t-col t-col--compress">
          <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><!--.t-col -->
      </div><!--.t-row -->
      <div class="t-row">
        <div class="t-col t-col--top relative">
          <div class="content-wrap">
            <div class="content">
            </div>
          </div>
        </div><!--.t-col -->
      </div><!--.t-row -->
      <div class="t-row">
        <div class="t-col t-a-c t-col--bot t-col--compress">
          <div class="kontakt">
            <div class="kontaktlabelbox">
              <div class="kontaktlabel">Kontakt</div>
            </div>
          </div>
        </div><!--.t-col -->
      </div><!--.t-row -->
    </div><!--.t-layout -->
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题