我不确定如何解释这一点，但我想尝试获取两个链接，点击时滚动隐藏的<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>
非常感谢有关如何实现这一目标的任何想法！
答案 0 :(得分：0)
请把它放在你的CSS中
html, body {
margin: 0 auto;
}
答案 1 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#parent{
width:100px;
height:500px;
border:1px solid black;
overflow:hidden;
}
#booka {
position:relative;
background: #3d9a44;
width: 100%;
height: 100%;
float: left;
}
#bookb {
position:relative;
background: #9a443d;
width: 100%;
height: 100%;
float: left;
}
#btn1{
background:orange;
height:20px;
width:80px;
}
#btn2{
background:red;
height:20px;
width:80px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
if ( $( "#booka:first" ).is( ":hidden" ) ) {
$( "#bookb" ).slideUp( "fast" );
$( "#booka" ).slideDown( "fast" );
} else {
$( "#bookb" ).slideDown( "fast" );
$( "#booka" ).slideUp( "fast" );
}
});
$("#btn2").click(function(){
if ( $( "#bookb:first" ).is( ":hidden" ) ) {
$( "#booka" ).slideUp( "fast" );
$( "#bookb" ).slideDown( "fast" );
} else {
$( "#booka" ).slideDown( "fast" );
$( "#bookb" ).slideUp( "fast" );
}
});
});
</script>
</head>
<body>
<div id="abc">Click on this paragraph.</div>
<div id="parent">
<div id="booka" hidden>BookA</div>
<div id="bookb" hidden>BookB</div>
</div>
<div id="btn1">A</div>
<div id="btn2">B</div>
</body>
</html>