javascript - 在 CSS 和 JS 中动态调整高度

Question

在某处可能有这个问题的答案，但我对 HTML、CSS 和 JS 的经验非常有限。我尝试给出的答案似乎无法正常工作，或者我没有正确输入它们，所以我想我只是问问。

页面右侧有一个框(图片)。当我放入超过某个点的列表时，框不会扩展以包含它们。这是因为它们的高度是静态设置的。我已经确定了在哪里对 JS 脚本和 CSS 表进行调整。它们都需要设置相同的高度才能正确扩展。我正在寻找一种动态扩展它的方法，或者一种能够为每个可能的设置设置高度的方法。通过变量或类似的东西。

这是 CSS 表(标题样式)

#content {height:868px;width:740px;float:left;position:relative}
#content > ul > li {position:relative;height:868px;width:100%;bottom:0}
.box1 {background:url(../images/bg_content.png) repeat;width:100%;height:100%;position:absolute;top:0;left:0}

两个内容部分需要调整的是 868px 高度。

这里是同样需要调整的JS脚本。 (标题页)

$('#content').stop().animate({height:'868px'})
    if (act!='') {
        $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
            $(act).css({display:'none'});
            $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
                act=page;   
            }); 
        })
    } else {
        $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
            act=page;   
        });     
    }

将 868 高度调整为您更改 CSS 的任何数字也会进行适当的调整。

如果您想具体了解我在说什么，可以使用以下模板。

Download或者 Website and the title of the template is Thom Sanders... it is number 8

谢谢，感谢您的关注。

圣诞快乐

Answer 1

添加滚动条:

将这些设置用于 #content在 div 中放置滚动条在需要时使用 CSS overflow属性(property)。

#content {height:868px;width:740px;float:left;position:relative;overflow:auto;}

背景图像修复:

因为 background图片仅适用于 768px 的原始高度高通.box1 , 你需要对 CSS 进行修改并将背景图像放在 .inner 中相反，它也覆盖了滚动部分。

.box1 {width:100%;height:100%;position:absolute;top:0;left:0}
.inner {background:url(../images/bg_content.png) repeat;padding:25px 55px 25px 60px;position:relative}

引用评论:

"I would even be pleased with a solution that instead of adjusting the height it was a button at the bottom of both the divs in the box that when clicked scrolled the content to the next segment of info."

要实现此功能，请创建两个按钮。一个是 Continue和另一个Previous .这是一个 HTML 模型片段，介绍如何拆分您的 UL 列表并添加这两个按钮。您可能需要添加/删除 <br />根据此解决方案的需要:

<li><a href="#">Gon recusandae taque earum rerum hic tenetur a sapiente delectus</a></li>
<li><a href="#">Aut reiciendis voluptatibus maiores alias consequatur</a></li>
<li><a href="#">Aut perferendis doloribus asperiores eveniet et voluptates repudiandae</a></li>
<li><a href="#">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</a></li>
</ul>

<a class="button1 continue"><span></span><strong>Continue</strong></a> <br /><br /><br /><br />

<a class="button1 previous"><span></span><strong>Previous</strong></a> <br /><br />

<ul class="list2 pad_bot1">
 <li><a href="#">Temporibus autem quibusdam et aut officiis debitis aut rerum</a></li>
 <li><a href="#">Necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae</a></li>
 <li><a href="#">Gon recusandae taque earum rerum hic tenetur a sapiente delectus</a></li>
 <li><a href="#">Aut reiciendis voluptatibus maiores alias consequatur</a></li>

然后将以下jQuery 添加到script.js 的底部文件，但在 Document Ready 内部分。

  // continue button
  $('.continue').click(function(){
     $('.inner').animate({top: -825}, 1000);  // NEGATIVE Value 768px min + button height 33px + a little extra = 825px
  });

  // previous button
  $('.previous').click(function(){
     $('.inner').animate({top: 0}, 1000);  // Reset top to 0. Therefore, this previous button is good for 2nd page, not 3rd.
  });

上述 jQuery CSS 设置假定按钮位于页面底部。根据需要调整特定值。 1000 指的是 1000 毫秒，或 1 秒的动画。