1

在某个地方可能有一个答案，但我在 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 的任何数字也会进行适当的调整。

如果您想具体了解我在说什么，这是我正在使用的模板。

下载 或 网站，模板的标题是 Thom Sanders... 它是数字 8

谢谢，我很感激你看看。

圣诞节快乐

4

1 回答 1

3

添加滚动条：

使用这些设置#content将滚动条放置在CSS属性div 需要的时候。overflow

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


背景图像修复：

因为该background图像仅适用于768pxhigh via的原始高度.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}


参考评论：

“我什至会对一个解决方案感到满意，它不是调整高度，而是在框中两个 div 底部的一个按钮，当单击该按钮时，它会将内容滚动到下一段信息。”

要实现此功能，请创建两个按钮。一个将是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 秒的动画。

于 2012-12-25T20:20:27.957 回答