0
我不確定如何解釋這一點，但我想嘗試獲得兩個鏈接，點擊後滾動隱藏的<div>以填充父級<div>的全部高度。當我嘗試使用<BODY>的全高時，我會遇到問題嗎？摺疊DIV自下而上
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333;
background: rgba(0, 109, 189, 1);
height: 100vh;
width: 100vw;
font-family: Calibri, Calibri, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
}
p {
padding: 10px;
}
a {
text-decoration: none;
color: blue;
border: 1px solid rgba(153, 222, 253, 0);
border-radius: 2px;
}
a:hover {
background: -webkit-linear-gradient(top, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
background: -o-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
background: -moz-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
background: linear-gradient(to bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
}
a.nav {
text-decoration: none;
color: blue;
border: 1px solid rgba(153, 222, 253, 0);
}
a.nav:hover {
background: -webkit-linear-gradient(top, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
background: -o-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
background: -moz-linear-gradient(bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
background: linear-gradient(to bottom, rgba(40, 28, 253, 1), rgba(22, 24, 25, 1));
border: 1px solid rgba(53, 22, 53, 1);
}
a.dull {
text-decoration: none;
}
#nav {
/* Left Column */
margin-top: 5px;
border-radius: 5px 0px 0px 0px;
margin-left: 5px;
margin-bottom: 5px;
margin-right: 0px;
line-height: 30px;
background-color: rgba(24, 24, 24, 1);
width: 200px;
border-right: 5px solid rgba(13, 16, 18, 1);
height: calc(100% - 100px);
height: -webkit-calc(100% - 70px);
height: -moz-calc(100% - 70px);
float: left;
color: black;
}
#footer-nav {
background: -webkit-linear-gradient(top, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
background: -o-linear-gradient(bottom, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
background: -moz-linear-gradient(bottom, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
background: linear-gradient(to bottom, rgba(50, 19, 25, 1), rgba(37, 75, 29, 1));
width: 197px;
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: bold;
height: 28px;
position: fixed;
bottom: 5px;
padding-left: 3px;
color: #black;
white-space: nowrap;
overflow: hidden;
border-bottom: #7494ad solid 1px;
}
#footer-nav:hover {
background: -webkit-linear-gradient(top, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
background: -o-linear-gradient(bottom, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
background: -moz-linear-gradient(bottom, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
background: linear-gradient(to bottom, rgba(40, 48, 53, 1), rgba(97, 32, 50, 1));
width: 197px;
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: bold;
height: 28px;
position: fixed;
bottom: 5px;
padding-left: 3px;
color: #black;
white-space: nowrap;
overflow: hidden;
border-bottom: #7494ad solid 1px;
cursor: pointer;
}
#text {
position: relative;
top: -4px;
}
#container {
bottom: 5px;
display: none;
left: 5px;
position: fixed;
width: 200px;
}
#inner {
background-color: rgba(20, 7, 7, .4);
}
#container2 {
bottom: 5px;
display: none;
left: 20px;
position: fixed;
width: 90%;
}
#inner2 {
background-color: #F0F0F0;
border: 1px solid #666666;
border-bottom-width: 0px;
padding: 20px 20px 100px 20px;
}<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<link rel="stylesheet" type="text/css" href="css/coll.css" />
<script type='text/javascript'>
//<![CDATA[
window.onload = function() {} //]]>
</script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
// When the DOM is ready, initialize the scripts.
jQuery(function($) {
// Get a reference to the container.
var container = $("#container");
// Bind the link to toggle the slide.
$("#nav").on("click", "#text",
function(event) {
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is(":visible")) {
// Hide - slide up.
container.slideUp(200);
} else {
// Show - slide down.
container.slideDown(200);
}
}
);
// Get a reference to the container.
var container2 = $("#container2");
// Bind the link to toggle the slide.
$("#nav").on("click", "#text2",
function(event) {
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container2.is(":visible")) {
// Hide - slide up.
container2.slideUp(200);
} else {
// Show - slide down.
container2.slideDown(200);
}
}
);
});
</script>
</head>
<body>
\t <div id="nav">
\t <div id="heading-nav">
\t \t \t A
\t \t </div>
\t \t <div id="container">
\t \t \t <div id="inner">
\t \t \t \t A
\t \t \t </div>
\t \t </div>
\t \t <div id="container2">
\t \t \t <div id="inner2">
\t \t \t \t B
\t \t \t </div>
\t \t </div>
\t \t <div id="footer-nav">
\t \t \t <div id="text">B</div>
\t \t </div>
</div>
</body>
</html>就如何實現這一目標的任何想法，將不勝感激！
*「當我嘗試使用我的
，而不是完整的高度獲得與它的問題？」 *那是一個問題或一個事實？ – GolezTrol不幸的是，我已經改變了一下，但現在它顯示在頁面的底部。 –