将“切换div的高度”设置为“百分比”
[英]Set Height of Toggled div to a Percent
问题描述
OK, so I have a little footer at the bottom of the page that, when clicked, toggles to show/hide a content box. 
好的，因此我在页面底部有一个页脚，单击该按钮可切换以显示/隐藏内容框。 Basically, the code looks like this: 基本上，代码如下所示：
css: 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: 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: 的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>
I want it so that the content's top edge, when up, is at or below about the halfway point of the window, and the overflowing text can be scrolled. 我想要它，以便内容的顶部边缘在向上时，等于或低于窗口的中点，并且可以滚动溢出的文本。 I tried setting the max-height of #foot_content to 50%. 我尝试将#foot_content的max-height设置为50％。 Filled the entire page. 填满了整个页面。 I also tried that with various values for position . 我还尝试了各种带有position值的方法。 Either I got the same result ( relative ), or it didn't toggle right ( fixed and absolute ). 要么我得到了相同的结果（ relative ），要么它没有正确切换（ fixed和absolute ）。 How can I do this? 我怎样才能做到这一点？
3 个解决方案
解决方案1
3 已采纳 2015-08-05 18:33:30
You can try setting #foot_content {height:50vh;} Edit: Check here for browser support of Viewport Units . 您可以尝试设置#foot_content {height:50vh;}编辑： 在此处检查浏览器对视口单元的支持 。
Or 要么
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%;
}
解决方案2
0 2015-08-05 18:35:33
I just did a fiddle and it looks like its working: https://jsfiddle.net/odv0mj33/ 我只是做了一个小提琴，它看起来像在工作： https : //jsfiddle.net/odv0mj33/
I just changed the footer to have max-height and it worked correctly. 我只是将页脚更改为max-height，并且可以正常工作。
footer {
position:fixed;
bottom:0;
right:2em;
width:25%;
background:white;
text-align:center;
max-height:50%;
} }
With the way its set up now you'll have to use max-height on the footer to get the desired outcome without using jQuery, I believe. 我相信，通过现在设置的方式，您必须在页脚上使用max-height才能获得所需的结果，而无需使用jQuery。 Add a max height to the footer and it'll scroll. 在页脚中添加最大高度，它将滚动。
#foot_content {
display:none;
overflow-y:auto;
max-height:200px;
} }
解决方案3
0 2015-08-05 18:38:08
You could do this with jQuery (since you're already using it) by adding this line after document ready: 您可以使用jQuery（因为您已经在使用它）来做到这一点，方法是在准备好文档后添加以下行：
$("#foot_content").height($(window).height() / 2);
So your JavaScript will now look like this: 因此，您的JavaScript现在将如下所示：
$(document).ready(function(){
$("#foot_content").height($(window).height() / 2);
$("#foot").click(function () {
$("#foot_content").slideToggle("1ms");
});
});
This sets the div 's height to be half that of the window's. 这会将div的高度设置为窗口高度的一半。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.