0
안녕하세요, 저는 제 페이지의 90 %에 항상 맞게 DIV 크기를 조정하려고합니다. 나는 항상 화면 하단에 위치시키고 자하는 바닥 글 (.kontakt)을 가지고 있으므로, DIV가 필요하다. (너무 커서 화면이 스크롤되면 바닥 글이 움직이지 않을 것이다.) jquery를 사용하여 내 div에 외부 HTML 파일을로드하는 중이고 div는 항상 내용에 맞게 크기가 조정됩니다. 문제는, 최대 높이, 최소 높이를 CSS로 설정하고 싶지 않지만 브라우저 창 크기가 조정될 때마다 div의 크기를 조정하고 싶습니다.div 높이를 조정하여 항상 페이지에 맞 춥니 다.
내가 찾지 못한 것을 쉽게 할 수있는 해결책이 있습니까? 그리고 그렇게 할 수있는 함수를 작성할 수 있습니까? 브라우저 창에서 트리거하는 트리거를 사용할 수있는 이벤트 핸들러는 무엇입니까?
난 그냥 위치를 사용할 수있을 것 같아요 : 바닥 글에 고정 (실제로 작동하지 않는)하지만 내 div (따라서 오버플로 : 자동;) 스크롤바를 가지고 싶습니다 브라우저 창에서 스크롤하는 것보다 . 이 .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:[email protected]'>[email protected]</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는 최선의 경로 ... 바닥 글을 수정 생각 90 %에'div'의 높이를 설정하고, 또한'오버 플로우 적용 스크롤 '그것에. –