Fatal编程技术网
  • javascript/
  • Javascript 调整浏览器大小时jQuery UI格式化节内容

Javascript 调整浏览器大小时jQuery UI格式化节内容

javascript jquery html css jquery-ui

Javascript 调整浏览器大小时jQuery UI格式化节内容,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我正在使用一个定制的手风琴脚本，我遇到的问题是，当调整浏览器大小时，它将格式化其中一个部分中的内容。我希望内容保持完整，如果您想查看内容，滚动条会注意。在我的演示中，您将看到第3节中的问题 我尝试执行overflow:hidden，但如果在ui内容上执行，则会消除滚动条。我也做了p上隐藏的溢出，但仍然没有按照我想要的那样工作。提前谢谢 这是 以下是HTML代码： <head> <meta charset="utf-8"> <style type="

我正在使用一个定制的手风琴脚本，我遇到的问题是，当调整浏览器大小时，它将格式化其中一个部分中的内容。我希望内容保持完整，如果您想查看内容，滚动条会注意。在我的演示中，您将看到第3节中的问题

我尝试执行overflow:hidden，但如果在ui内容上执行，则会消除滚动条。我也做了p上隐藏的溢出，但仍然没有按照我想要的那样工作。提前谢谢

这是

以下是HTML代码：

<head>
    <meta charset="utf-8">

    <style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>

 <div class="file_wrapper">
        <div class="file_inner">

<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 2</a></h3><div>
<span class="minus"><p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p> </p>
<p>################################################################################</p>
<p># Test 1. GOOD *** Check up/up state for all interfaces excluding tunnel       #</p>
<p># Test 2. GOOD *** BGP neighbor not active                                     #</p>
<p># Test 3. GOOD *** BGP adv and routes check                                    #</p>
<p># Test 4. GOOD *** Show IP OSPF Neighbor                                       #</p>
<p># Test 5. GOOD *** GLBP tested correctly                                       #</p>
<p># Test 6. GOOD *** Verify WCCP is running correctly                            #</p>
<p># Test 7. GOOD *** All pings were succesful                                    #</p>
<p># Test 8. GOOD *** Environmental status                                        #</p>
<p>################################################################################</p>
            </div>                </div>                                                                                                    
              </div>
              </div>

      <div class="file_wrapper">

        <div class="file_inner">
<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </span></div>
<h3><a href="#">Section 2</a></h3><div>
<p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
            </div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p> </p>
<p>################################################################################</p>
<p># Test 1. GOOD *** Check up/up state for all interfaces excluding tunnel       #</p>
<p># Test 2. GOOD *** BGP neighbor not active                                     #</p>
<p># Test 3. GOOD *** BGP adv and routes check                                    #</p>
<p># Test 4. GOOD *** Show IP OSPF Neighbor                                       #</p>
<p># Test 5. GOOD *** GLBP tested correctly                                       #</p>
<p># Test 6. GOOD *** Verify WCCP is running correctly                            #</p>
<p># Test 7. GOOD *** All pings were succesful                                    #</p>
<p># Test 8. GOOD *** Environmental status                                        #</p>
<p>################################################################################</p>

                </div>                                                                                               
              </div>

</body>
您所能做的就是在css中尝试这样做：

div{position:absolute;left:(somepixel)px;top:(somepixel)px;}
基本上，如果您为根元素i.e html文档指定宽度：100%和高度：100%，它将根据可用宽度自动调整大小。

并且不以百分比形式提供宽度和高度…当您调整浏览器大小时，尝试不在此正文中使用百分比会造成小麻烦{颜色：111；线条高度：1.5；边距：0自动；填充：0；宽度：90%；高度：100%；字体系列：Helvetica Neue，Helvetica，Arial，无衬线；背景：f9f9f9；}但是我想调整页面大小，我不想调整的是第3节中段落的内容 
div{position:absolute;left:(somepixel)px;top:(somepixel)px;}