縦書きCSSのレイアウト要素の高さがきちんと取得されず、下にある要素の表示がおかしくなる

Question

###実現したいこと・発生している問題

• テキストが縦書きのコンテンツページ
• テキストがコンテンツ内の右端→左端に向けて表示、はみ出しそうだったら次の段に移動する
• テキストの量には依存させたくなく、コンテンツの高さ（height）や段数（column-count）などを固定値では指定したくない

上記のような仕様で、テキストが縦書きになっているレイアウトのデザインを作っていましたが、
Firefox以外のブラウザ（Chrome・Safari・IE11・Microsoft Edge）で、縦書きコンテンツ下にある通常コンテンツを突き抜けた状態で表示されてしまいます。

2017/06/30 20:00追記＞

• 縦書きレイアウト部分の要素の高さが２段目以降がうまく取得できず（要素につけた背景色が要素と合っていない）、その結果、下にある要素がフッターが変な位置に表示されてしまうのを解消できればと考えています。
• サンプルだと簡素なレイアウトなのですが、実装するサイトでは縦書きコンテンツの下に高さ不明のコンテンツを色々配置する予定です。

###該当のソースコード
https://codepen.io/ruucb/pen/bRLLzO
上記URLでソースを公開しています。

<div class="article__detailWrap">
	<div class="article__main">
		<div class="container">
			
			<article class="template">
				<p class="subTitle">テキストタイトル</p>
				<div class="layout__text">
					<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓（とん）と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。但（たゞ）彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許（ばか）りである。掌の上で少し落ち付いて書生の顔を見たのが所謂（いはゆる）人間といふものゝ見始（みはじめ）であらう。此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐（やくわん）だ。其後猫にも大分逢つたがこんな片輪には一度も出會（でく）はした事がない。加之（のみならず）顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟（けむり）を吹く。どうも咽（む）せぽくて實に弱つた。是が人間の飲む烟草（たばこ）といふものである事は漸く此頃（このごろ）知つた。</p>
				</div>
			</article>
			・
			・
			・
			<article class="template">
				<p class="subTitle">テキストタイトル</p>
				<div class="layout__text">
					<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓（とん）と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。但（たゞ）彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許（ばか）りである。掌の上で少し落ち付いて書生の顔を見たのが所謂（いはゆる）人間といふものゝ見始（みはじめ）であらう。此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐（やくわん）だ。其後猫にも大分逢つたがこんな片輪には一度も出會（でく）はした事がない。加之（のみならず）顔の眞中が餘りに突起して居る。そうして其穴の中から時々ぷうぷうと烟（けむり）を吹く。どうも咽（む）せぽくて實に弱つた。是が人間の飲む烟草（たばこ）といふものである事は漸く此頃（このごろ）知つた。</p>
				</div>
			</article>
		</div>
	</div>
</div>

<footer class="footer">
	copyright表記など
</footer>

// 大枠コンテンツ
.article__main {
  width: 960px;
  margin: 40px auto;
  background: #ddd;
}
// テキストを囲ってるコンテンツ。テキストの流れは右→左
.container {
  width: 700px;
  background: #f00;
  margin: 0 auto 0 0;
  writing-mode: vertical-rl;
  column-width: 12em;
  column-gap: 3em;
  column-rule: 1px solid #ddd;
}
// フッターなど下にあるコンテンツ
.footer {
  width: 100%;
  background: #ff0;
  text-align: center;
  padding: 40px 0;
  position: relative;
  z-index: 2;
}

###試したこと

• 大枠（.article__detailWrap）に対してheight指定（height: 2000pxなど）をしてみる

→解消はしたのですが、テキストのボリュームが少ない場合も考慮して出来れば固定値指定は避けたいです。

• 参考サイトや、縦書きレイアウトのブログを開発者ツールで調べてみたりしたのですが、解決まで至らず…

###補足情報

• IE10以下は非対応の予定です。

Answer 1

％の指定は試しましたか、どんなデバイスにも有効です。

<style>
.article_main {
height : 100%;
}
<style>

Answer 2

.article__mainのmarginの40pxを消して.footerにmargin-top:40px;を追加って感じですかね・・・。chromeで確認しました。
あ、.article__mainにmargin-top:40px;が別途必要かな？

あとは、.containerにoverflow-y:auto;を入れるとか。。。

Comments

[m.ts10806]

あ・・.article__mainにmargin-top:40px;はイカンですね。
結構難しいですね。すみません。
もう少し調整して回答書き直します。

[m.ts10806]

.containerにoverflow-y:auto;はただの現実逃避策みたいなものなので本当に参考程度に・・

[ruucb]

ありがとうございます！

実際のURL（https://codepen.io/ruucb/pen/bRLLzO）を確認いただき調整していただいたのだと思いますが、縦書きテキストの段組はスクロールしていくと合計４段あります（わかりにくくてすみません）
教えていただいた方法を試してみたのですが、多少レイアウトは整ったのですが根本の解決には至らず…

縦書きレイアウト部分の要素の高さが２段目以降がうまく取得できず、フッターがおかしな位置に表示されてしまうのをなんとかできればと考えております。

[m.ts10806]

codepen等々アクセスができない若干特殊な環境のため、ローカルにソースコピーしてエディターでちまちま変更かけてます（＾＾；）
chromeの開発ツールでみると「height:660px;」というのが裏で勝手につけられてるんですよね。
こいつを外せば何とかなるのかなと色々やっていて出来ない中でoverflow-y:auto;で現実逃避してました。

[m.ts10806]

とりあえずフッター固定をしてみると良いです。
https://webkikaku.co.jp/blog/htmlcss/footer-bottom/

ただ、突き抜けてるのはあくまで謎のheight:660pxのせいであってfooterの位置がおかしいわけではないので解決はしなさそうですが・・・

[ruucb]

> codepen等々アクセスができない若干特殊な環境のため、ローカルにソースコピーしてエディターでちまちま変更かけてます（＾＾；）
おお、そうだったのですね…　色々調べいただき有難うございます！
フッター固定、たしかにその手がありますね。

サンプルだと簡素なレイアウトなのですが、実装するサイトでは縦書きコンテンツの下に高さ不明のコンテンツを色々配置する予定でして…もう少し調べてみたいと思います、有難うございました！