好的，所以我在页面底部有一个小页脚，单击它会切换显示/隐藏内容框。基本上，代码如下所示:
CSS:
body {
background:black;}
footer {
position:fixed;
bottom:0;
right:2em;
width:25%;
background:white;
text-align:center;}
#foot_content {
display:none;
overflow-y:auto;}
#foot_content p {
margin:1em auto 0;
max-width:75%;}
javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#foot").click(function () {
$("#foot_content").slideToggle("1ms");
});
});
</script>
html:
<body>
<footer class="bar" id="foot">
<div id="foot_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet cursus sapien sit amet rutrum. Suspendisse semper eros sit amet sem semper, vitae finibus sem porta. Nullam facilisis est vestibulum efficitur molestie. Nam euismod, est a feugiat placerat, nibh diam faucibus ipsum, nec scelerisque velit nisl quis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget justo ligula. Aenean sodales nunc at sem venenatis, id pharetra diam vehicula. Nullam mollis massa quis libero tincidunt ultrices. Integer odio lorem, rhoncus id pretium eget, suscipit et ante.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet cursus sapien sit amet rutrum. Suspendisse semper eros sit amet sem semper, vitae finibus sem porta. Nullam facilisis est vestibulum efficitur molestie. Nam euismod, est a feugiat placerat, nibh diam faucibus ipsum, nec scelerisque velit nisl quis nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas eget justo ligula. Aenean sodales nunc at sem venenatis, id pharetra diam vehicula. Nullam mollis massa quis libero tincidunt ultrices. Integer odio lorem, rhoncus id pretium eget, suscipit et ante.</p>
</div>
<div class="title">Title</div>
</footer>
</body>
我希望内容的上边缘在向上时位于或低于窗口的中间点，并且可以滚动溢出的文本。
我尝试将 #foot_content 的 max-height 设置为 50%。填满了整个页面。我还尝试使用 position 的各种值。要么我得到了相同的结果(relative)，要么它没有正确切换(fixed 和 absolute)。我该怎么做？
最佳答案
您可以尝试设置 #foot_content {height:50vh;} 编辑:Check here for browser support of Viewport Units .
或者
html, body {
height: 100%; /* for % based height to work you need to declare height on the parent */
margin: 0;
padding: 0;
}
#foot_content {
height:50%;
}
关于javascript - 将切换的 div 的高度设置为百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31840039/