文章量に応じて段が増える縦組み要素の正確な高さを取得できない

縦組みのコラムページ（レスポンシブ対応）を作成しています。

<p>タグ内の文章は増減します。文章は右から左へと進み、指定の幅を超える文字量になると下に段が増えるようにしたいのですが、下記cssでは段は増えるものの、<section>要素が<nav>要素と重なってしまいます。

html
1  <main>
2    <section>
3      <h2>タイトル</h2>
4      <p>
5        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
6        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
7        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
8        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
9        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
10        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
11        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
12        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
13        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
14        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
15        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
16        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
17      </p>
18    </section>
19
20    <nav>
21      <ul>
22        <li class="pagerCurrent">1</li>
23        <li><a href="#">2</a></li>
24        <li><a href="#">3</a></li>
25      </ul>
26    </nav>
27  </main>

css
1main{
2  width: 80%;
3  margin: 40px 10%;
4}
5section{
6  width: 100%;
7  max-width: 100%;
8  writing-mode: vertical-rl;
9  height: 24em;
10  columns: 24em;
11  column-gap:40px;
12}
13
14nav{
15  text-align: center;
16  margin: 0 auto;
17}

そこで<section>要素の高さを取得し、<nav>要素にmargin-topの値が付与されるようにしましたが、

<section>要素の正確な高さを取得することができません。どうすればよいでしょうか？

jQuery
1function setting(){
2  var hsize = $('section').outerHeight();
3  $('nav').each(function() {
4		$(this).css({'margin-top': hsize});
5	});
6}
7$(document).ready(function(){
8	setting();
9});
10$(window).on('load', function(){
11	setting();
12});
13$(window).on('resize', function(){
14	setting();
15});