Question

我的网站非常庞大，我希望根据内容高度自动将其分成几部分，例如谷歌文档或单词。

所以我认为我使用window.innerHeight来获得全高，并做了类似的事情：

$("content").ready(function(){
 from(window.innerHeight == 1,window.innerHeight == 70%){
     $(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
 }
 from($(".endpage").innerHeight, $(".endpage").innerHeight + 70%){
     $(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
 }})

.wrapper div需要包含填充屏幕70％的元素，如下所示：

<div class="wrapper">
   //content filling 70% of the screen height
</div>
<div class="wrapper">
   //content filling 70% of the screen height
</div>

但当然，它不起作用。

我该怎么做？

修改根据要求，这是一个片段：

＆＃13;

$("content").ready(function() {
  from(window.innerHeight == 1, window.innerHeight == 70 % ) {
    $(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
  }
  from($(".endpage").innerHeight, $(".endpage").innerHeight + 70 % ) {
    $(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
  }
})

＆＃13;

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i");
h1,
h2,
h3,
h4,
h5,
h6,
th,
label {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  text-align: left;
  color: #0a0a0a;
  line-height: 1.5em;
}

p,
td {
  margin: 0;
  font-size: 1.3em;
}

p+p {
  text-indent: 2em;
}

ol,
ul {
  font-size: 1.3em;
  padding: 0em 1em;
  margin: 1em 0em;
}

ul ul,
ol ol {
  font-size: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <h1>lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
    Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</p>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
      Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis
        nulla. Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
    </ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
      Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis
        nulla. Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
    </ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
      Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis
        nulla. Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
    </ul>
  </ul>

</div>

＆＃13;

Answer 1

您可以尝试单独定义各个部分：

var wph = $(".wrapper").height(); //this could be window.innerHeight
if( wph > 50 ){
$(".wrapper").wrapInner("<div class='pager'></div>");
}

然后你可以使用str.length定义一个值：

$(".wrapper").text().length;

这有助于布局您的内容。

在jQuery中基于window.innerHeight包装内容？

1 个答案: