我不确定如何解释这一点，但我想尝试获得两个链接，单击它们会滚动一个隐藏的 <div>最多填满父级的全高<div> .当我尝试使用 <BODY> 的全高时遇到问题相反？
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>
<div id="nav">
<div id="heading-nav">
A
</div>
<div id="container">
<div id="inner">
A
</div>
</div>
<div id="container2">
<div id="inner2">
B
</div>
</div>
<div id="footer-nav">
<div id="text">B</div>
</div>
</div>
</body>
</html>任何关于如何实现这一目标的想法将不胜感激!
最佳答案
请把它放在你的CSS中
html, body {
margin: 0 auto;
}
关于jquery - 折叠DIV底部到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27634989/