【发布时间】：2015-01-09 21:10:08
【问题描述】：
大家好，我正在尝试调整 DIV 的大小以始终适合我的页面的 90%。我有一个页脚 (.kontakt)，我希望它始终位于屏幕底部，因此我需要我的 DIV 进行缩放（如果它太大，滚动时页脚不会移动）。我正在使用 jquery 将外部 html 文件加载到我的 div 中，并且 div 总是调整大小以适应内容。问题是，我不想在 css 中设置 max-height、min-height，但希望每次浏览器窗口调整大小时 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>【问题讨论】：
-
老实说，我认为 CSS 是您最好的路线...按照您的说法修复页脚，将
div的高度设置为 90%，并将overflow: scroll应用到它。跨度>
标签： javascript jquery html css