例:
html, body {
height: 100%;
}
#pageholder {
min-height: 100%;
display: flex;
flex-direction: column;
}
#pageholder .container {
flex: 1;
}
ishitakaさま。
いつも面倒をみてくださり、ありがとうございます。
早速記事を読んでみました！
ishitakaさまの例を参考に追加CSSに追記し、お陰さまで実装することが出来ましたが、実際には、どの部分を見て判断なさっているのでしょうか？
よろしくお願いします。
CGさま。
いつもありがとうございます。
サイドバーウィジェットがあればいいのですね。
参考にさせていただきます。
サイドバーウィジェットがあればいいのですね。
このテーマの場合、サイドバーウィジェットの有無は関係ありません。コンテンツおよびサイドバーの占める高さによります。
実際には、どの部分を見て判断なさっているのでしょうか？
Chrome のデベロッパーツール (開発者ツール) を使用すると、ページの HTML 要素をツリービュー形式 (DOM エレメントツリー) で表示することができます。
これで、HTML 要素の構成を簡単に調べることができます。
Beautiplus テーマの HTML 要素の構成:
<html>
<body>
<div id="pageholder">
<div class="header headerinner"></div>
<div class="container"></div>
<div id="footer-wrapper"></div>
</div>
</body>
</html>
あとは、CSS のフレックスボックス (flexbox) の使い方を調べるとよいと思います。
ishitakaさま。
ありがとうございます。
デベロッパーツールを調べてみます。
ありがとうございました！
また、ぜひよろしくお願いします。
