Javascript 使用偏移量将div内容调整到页面内容_Javascript_Jquery_Offset_Offsetheight

Javascript 使用偏移量将div内容调整到页面内容

javascript jquery

Javascript 使用偏移量将div内容调整到页面内容,javascript,jquery,offset,offsetheight,Javascript,Jquery,Offset,Offsetheight,如果div中内容的高度超过了主div的高度，我们试图使用offset并调整高度，但没有成功。我们尝试了所有可能的方法，偏移顶部，偏移高度谁能帮我们找到正确的处理方法。我们希望避免线半可见 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <st

如果div中内容的高度超过了主div的高度，我们试图使用offset并调整高度，但没有成功。我们尝试了所有可能的方法，偏移顶部，偏移高度

谁能帮我们找到正确的处理方法。我们希望避免线半可见

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <style type="text/css" media="screen">
 body {background-color:white; font:16px Helvetica, Arial; color:black;}
.pagination {margin:auto; display:block; height:275px; width:300px; position:relative;      overflow:hidden; border:1px solid black;}
 </style>
<script>
$(document).ready(function() {
//$('.pagination').children().wrapAll('<div class="content"/>');
$('.next').click(function() {
    //console.log($('.content'));
    var height = 10;
    var displayHeight = $('.pagination').height();


    var contentNode = $('.content')[0];

    var currentDisplayHeight = 0;
    for(var i=0; i<contentNode.childNodes.length; i++)
    {
        var currentNode = contentNode.childNodes[i];
        //If it is not a text node
        if(currentNode.nodeType != 3)
        {
            //console.log(currentNode.offsetHeight > displayHeight);
            currentDisplayHeight = currentDisplayHeight + currentNode.offsetHeight;
            console.log(currentDisplayHeight);
            //passing current page
            if(currentDisplayHeight > displayHeight)
            {
                console.log(currentNode);
                console.log("Passing");
                //page 2
                currentDisplayHeight = currentNode.offsetHeight;

            }
        }
    }

    var current = ($('.content').css('margin-top') || '0px');
    //for(i=0; i<pag.
    $('.content').css('margin-top',current.substring(0,current.length-2) - $('.pagination').height() + 'px');
});
});


 </script>
 </head>
 <body>
 <div id="page" class="pagination" style="padding:5px">
<div class="content">
    <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p>
    <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.</p>
    <p>(Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons.) (The previous sentence in parentheses was modified by the 14th Amendment, section 2.) The actual Enumeration shall be made within three Years after the first Meeting of the <span id="c" onclick="clk()">Congress</span> of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct. The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode Island and Providence Plantations one, Connecticut five, New York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five and Georgia three.</p>
    <p>When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.</p>
    <p>The House of Representatives shall chuse their Speaker and other Officers; and shall have the sole Power of Impeachment.</p>
</div>
   </div>
    <ul>
    <li>Previous</li>
    <li class="next">Next</li>
<li><a href="" onclick="return test()">Click</a></li>
 </body>
 </html>


正文{背景色：白色；字体：16px Helvetica，Arial；颜色：黑色；}
.pagination{页边距：自动；显示：块；高度：275px；宽度：300px；位置：相对；溢出：隐藏；边框：1px纯黑色；}
$（文档）.ready（函数（）{
//$（'.pagination'）.children（）.wrapAll（''）；
$（'.next'）。单击（函数（）{
//log（$（'.content'）；
var高度=10；
var displayHeight=$（'.pagination'）.height（）；
var contentNode=$（'.content'）[0]；
var currentDisplayHeight=0；
对于（变量i=0；i显示高度）；
currentDisplayHeight=currentDisplayHeight+currentNode.offsetHeight；
console.log（当前显示高度）；
//通过当前页面
如果（currentDisplayHeight>displayHeight）
{
console.log（currentNode）；
控制台日志（“传递”）；
//第2页
currentDisplayHeight=currentNode.offsetHeight；
}
}
}
当前变量=（$（'.content'）.css（'margin-top'）| |'0px'）；
//对于（i=0；i您的内容对于300 X 275px的大小来说太大了。
要包装内容，您必须减小字体大小或
更改CSS
 .pagination{height:AUTO;}

你能提供一些你的代码吗？向我们展示你迄今为止尝试过的代码。请找到上面的示例代码。你调整高度的意思是什么？我的意思是避免被剪切的线条。我需要将其上下移动，并使（.content）与主分区中的内容完全一致（.分页）