web-dev-qa-db-ja.com

ページをウィンドウに自動的に合わせるにはどうすればよいですか？

友人のために最初の適切なHTML Webサイトを始めたばかりで、そのWebサイトでどのようにページを自動調整できるのか疑問に思っていましたか？

スクロールを必要としないランドスケープデザインです。

htmlcsswebresize
20
JoeJoe2416

bodyおよびhtmlを position:fixed; に設定してから、 right: 、 left: 、 top:を設定する必要があります 、および bottom: to 0;。これにより、コンテンツがオーバーフローしても、ビューポートの制限を超えて拡張されません。

例えば：

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS：

html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

JS Fiddle例

Caveat：この方法を使用すると、ユーザーがウィンドウを小さくすると、コンテンツが切り捨てられます。

16
JSW189

横向きの場合は、より広い幅とより低い高さが必要になります！それはすべてのウェブサイトが持っているものです。

最初に基本的なもの、次に残りのものにしましょう！

基本的なCSS：

CSSでこれを行うことができます。

#body {
width: 100%;
height: 100%;
}

ここでは、次のように、id本文でdivを使用しています。

<body>
  <div id="body>
    all the text would go here!
  </div>
</body>

次に、100%の高さと幅のWebページを作成できます。

ウィンドウのサイズを変更しようとした場合はどうなりますか？

問題がポップアップします。ウィンドウのサイズを変更しようとしたらどうなりますか？次に、#body内のすべての要素がUIを台無しにしようとします。そのためにこれを書くことができます：

#body {
height: 100%;
width: 100%;
}

min-heightmax-heightmin-widthとmax-widthを追加するだけです。

この方法では、ページ要素はページの読み込み時の場所にとどまります。

JavaScriptを使用：

JavaScriptを使用して、UIを制御し、jQueryを次のように使用できます。

$('#body').css('min-height', '100%');

他のすべての残りのCSSプロパティ、およびJSは、ユーザーがウィンドウのサイズを変更しようとするときにユーザーインターフェイスを処理します。

Webページにスクロールを追加しない方法：

スクロールを追加しようとしていない場合は、このJSを使用できます

$('#body').css('min-height', screen.height); // or anyother like window.height

これにより、ユーザーがページを読み込むたびにドキュメントの高さが変更されます。

ユーザーが異なる画面解像度を持つ場合、ユーザーは自分の画面用に作成されたCSSまたはスタイルシートが必要になるため、2番目のオプションの方が適しています。他人のためではありません！

Tip：では、JSを使用して現在の画面サイズを見つけ、ページを編集してみてください！ :)

11
Afzaal Ahmad Zeeshan

たとえば、cssを使用して実行できます

<style>
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:#DDD;
}
</style>
6
user1825286