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的这些设置，当需要<{1}} 时，将滚动条置于div 内，并使用CSS overflow属性。

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

背景图片修复：

由于background图片仅适用于768px高的原始高度.box1，因此您需要为CSS创建一个mod并将背景图像放在{{相反，它也覆盖了滚动部分。

.inner

参考评论：

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

要实现此功能，请创建两个按钮。一个是.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}，另一个是Continue。以下是HTML中的模拟片段，介绍如何拆分UL列表并添加这两个按钮。您可能需要根据此解决方案的需要添加/删除Previous：

 

然后将以下jQuery添加到<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">Continue</a> <a class="button1 previous">Previous</a> <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>文件的底部，但在script.js部分内。

Document Ready

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

CSS和JS中动态调整高度

1 个答案: