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

友だちのための最初の適切なHTMLウェブサイトを始めたばかりで、私はどのようにしてウェブサイトを自動作成することができるのだろうかと思っていましたか？ページをウィンドウに自動的にフィットさせるにはどうすればよいですか？

スクロールが不要なランドスケープデザインです。

2013-10-05 JoeJoe2416

@JoshC私たちはすべての学習者です。風刺を抑えよう。 – fred02138

この質問を再開すると、その理由がわかります。 –

真実..ここにはたくさんの皮肉があります[スタックオーバーフロー] ..あなたが探しているものが何か助けているとしばらくの間、私はちょうどこのサイトを無視しました... – albruno

あなたがposition:fixed;からbodyとhtmlを設定し、0;にright:、left:、top:、およびbottom:を設定する必要があります例

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

出典

2013-10-05 19:20:45 user1825286

背景色はあなたを見せてくれるだけです – user1825286

のためにそれを行うには、CSSを使用することができます。そうすれば、たとえコンテンツがオーバーフローしても、ビューポートの限界を超えて拡大することはありません。例えば

：

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

CSS：

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

JS Fiddle Example

警告：ユーザーがウィンドウを小さく作る場合は、この方法を使用して、コンテンツがカットされます。

出典

2013-10-05 19:22:32 JSW189

風景の中では、幅と高さがさらに必要になります。それだけですべてのウェブサイトが持っているものです。

基本的に最初から残りの部分に移動します。あなたが次に

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

ことができます。あなたのように、idボディとのdivを使用しているここでは、これを行うことができますCSSで

、

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

：

基本的なCSS 100%の高さと幅のウェブページを持っています。

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

問題がポップアップします。ウィンドウのサイズを変更しようとするとどうなりますか？ #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ページへのスクロールを追加しない方法
：

あなたがスクロールを追加しようとしていない場合は、あなたが使用することができ、これは

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

この道をJS、文書を取得しますユーザーがページを読み込むたびに新しい高さになります。

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

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

出典

2013-10-05 19:33:34

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

答えて

関連する問題