私はCSSに新しく、私は自分のウェブページを正確に画面サイズに合わせるのにいくつかの困難を見出していますが、それは収まらず、スクロールバーが発生します。私は言及したすべての方法を試したhereしかし、それらのどれも動作しません。私のウェブページは多かれ少なかれthisのように見えます。私はスクロールせずにウェブページを正確に画面サイズに合わせる方法は？
html{
height: 100vh;
}
body{
width: 100%;
height: 100vh;
background-color: #ffffff;
font-family: gothambook;
position: fixed;
top: 0;
bottom: 0;
}
を使用した場合、スクロールバーが発生しなかったが、コンテンツは、画面の下に行って、見えなかった
あなたは完全に、あなたはこれだけ
であなたのスタイルを置き換えることができ、スクロールを無効にしたい場合html {
overflow: hidden;
}
これはスクロールバーを削除し、コンテンツをビューポートの上にプッシュして表示しないようにします。 –
codepenまたはjsfiddleに例を提供できますか？ – AntK
https://jsfiddle.net/yrcgwsm7/画像リンクはローカルにリンクされているため利用できません。 –
あなたはほぼあります。 htmlとbodyの両方をターゲットにして、widthとheightの両方を100%に設定してください。
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: red;
}それはうまくいきませんでしたが、ここでそれを見ていますhttps://jsfiddle.net/yrcgwsm7/ –
@NaveenKumar 200pxの高さのビューポートを作らない限り、私はスクロールバーを取得していません。 –
はい、これは別の問題です。ビューのポートサイズが小さくなると（mobバージョンと同じように）、サイズが適合します。ビューポートのサイズが通常のラップトップサイズに増加すると、スクロールバーが発生します。 –
html {}
body {
height: 95vh;
}
VHが表示高さを意味し、そう97vhは97％表示/ブラウザの高さです。それは少しスクロールします100VH何らかの理由で
https://css-tricks.com/fun-viewport-units/
。
'{max-width：100vw;最大高さ：100vh;} ' –
いいえ、うまくいきませんでした。 –