次のコードは5行以上になる場合に「・・・」で省略されます。
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical;]]>
3のようにbody内の要素が増えてきてスクロールバーが発生すると一番下まで延びてくれない。
これはhtml, bodyに設定したheight:100%が原因
ただこの時、bodyにbackground-color:blue;を設定したらちゃんと一番下まで色がついている不思議
仕方がないのでJavaScriptでゴリゴリしてみた。
確認される場合はコチラからどうぞ
ゴリゴリしたコードはこちら
function bodyHeight(){ // body要素のheightを初期化 document.body.style.height = 'initial'; // heightを指定する document.body.style.height = document.body.clientHeight + 'px'; }; // 読み込み時 window.addEventListener('load', bodyHeight); // リサイズ時 window.addEventListener('resize', bodyHeight);]]>
height:calc(100vh - 20vw);
このようにcalcの中でビューポートは使用できません。
height:calc(100% - 20px);
などは使用できます。
どうしてもビューポートを使用して綺麗に表示させたい時は
JavaScriptで高さをpxで取得して計算した方が良いかもしれませんね。
body{ height:100vh; } /* iOS hack */ @supports(-webkit-touch-callout:none){ html, body{ height:-webkit-fill-available; } }]]>
#parent{ position:relative; /* 全画面の場合 */ height:100vh; } #parent > div{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }]]>
このようなタグでページ内ジャンプをさせたい。
でも、posizion:fixedなどでページ上部にメニュー等を張り付かされていると
ジャンプさせたい箇所が微妙にメニュー等の後ろに隠れてしまう。
cssだけで対応できます
ページ上部に張り付いているメニュー等のheightが50pxの場合
html
<a name="hoge" id="hoge">HOGEですよー</a>
css
#hoge{ display:block; margin-top:-50px; padding-top:50px; pointer-events:none; }]]>
-webkit-tap-highlight-color:rgba(0, 0, 0, 0); tap-highlight-color:rgba(0, 0, 0, 0);]]>
display:inline-block; writing-mode:vertical-rl; white-space:nowrap; text-orientation:upright; -ms-writing-mode:tb-rl;]]>
/* mainタグでpaddingが効かない */ main{ display:block; } /* placeholder */ input:-ms-input-placeholder{ color:#6d6d6d; }]]>