ページ高さはビューポートの100％ですか？

私はウェブ開発全体にとって非常に新しいものであり、これは私の非常に最初の応答性の高いサイトであることを覚えておいてください。これを念頭においてください。私はこの段階でnoobという言葉の定義です。しばらくの間答えを探して、運がないと、私はここの誰かが私を助けてくれることを願っています。ページ高さはビューポートの100％ですか？

私はこのウェブサイトのホームページを作ろうとしています。デザインは、ページの左側にあるブロックで、上部にロゴが表示され、下に一連のリンクが表示されます。これらのリンクはすべて同じ背景にあります。これの右側には、画面の残りの部分を埋める1つの大きな画像があります。私は全ページが閲覧されたデバイスのブラウザウィンドウを埋めるようにしたいので、スクロールする必要は全くありません。つまり、幅と高さの両方がビューポートの100％です。ページの幅は私には悲しみを与えず、サイドバーが幅の20％、メイン画像が80％になるように、好みの画面サイズにうまく調整しました。

しかし、高さは別の話です。ビューポートの100％で動作する高さを得るために、これまでに試したCSSの組み合わせでは、私は見えません。サイドバーが短すぎてメイン画像が長すぎる、または両方が長すぎるなどメイン画像縦横比を維持したいだけですが、ほとんどの画像が表示され、サイドバー私はちょうどページの高さの100％に収まるようにしたい。ここでは現時点では私のコードは次のとおりです。

<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
html 
{ 
height: 100%; 
margin: 0; 
padding: 0; 
} 

body 
{ 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#page 
{ 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#sidebar 
{ 
float: left; 
width: 20%; 
height: 100%; 
padding-bottom: 10; 
margin: 0; 
background: url(/Images/bg.jpg); 
} 

#slideshow 
{ 
float: right; 
width: 80%; 
height: 100%; 
overflow: hidden; 
margin: 0; 
padding: 0; 
} 

#logoimg 
{ 
width: 80%; 
margin-top: 10%; 
margin-left: 10%; 
margin-right: 10%; 
} 

#mainimg 
{ 
width: 100%; 
overflow: hidden; 
} 

.link 
{ 
font-family: courier; 
font-size: 1.3em; 
text-align: center; 
padding-top: 7%; 
padding-bottom: 1%; 
color: rgba(255,255,255,1.00); 
} 

@font-face 
{ 
font-family: courier; 
src: url(/courier_new-webfont.ttf); 
src: url(/courier_new-webfont.eot); 
src: url(/courier_new-webfont.woff); 
} 

</style> 
</head> 

<body> 
<div id="page"><!--Whole page container--> 
<div id="sidebar"><!--Side bar container--> 
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div> 
    <div class="link" id="homelink">Home<!--Home link--></div> 
    <div class="link" id="aboutlink">About<!--About link--></div> 
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div> 
    <div class="link" id="priceslink">Prices<!--Prices link--></div> 
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div> 
    <div class="link" id="contactlink">Contact<!--Contact link--></div> 
    <div class="link" id="clientslink">Clients<!--Clients link--></div> 
</div> 
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container--> 
</div> 
</div> 
</body> 
</html>

これですべてのヘルプは本当にいただければ幸いですし、任意の大規模なアマチュアのミスを指摘することを躊躇しません。私は批判を受けてそれから学ぶつもりです。ありがとう

出典

2013-10-30 Dan

私が提案できる最初のことは、そのスタイルタグを削除して、CSSを自分のページに転送することです。あなたがメディアのクエリとすべてをこの方程式に持っていくつもりなら、あなたは別のCSSページが必要です。 –

私はあなたにこれをスタイルする方法を示すために基本的な設定をしました。高さを100％に設定するための最良の方法は、jQuery/Javascriptを使用することです。あなたは、ウィンドウの高さを見つけることができますし、それを使用してCSSに入力します。

この方法では、var wH = $(window).height();は高さを見つけて数値に変換しています。その後、$('.sideBar').css({height: wH});を使用すると、サイドバーのCSSに高さを入力しています。

jQueryの

function windowH() { 
    var wH = $(window).height(); 

    $('.sideBar, .mainImg').css({height: wH}); 
} 

windowH();

私が書いたこの関数は、これら二つの要素にウィンドウの高さを与えています。これにより、2つの要素がブラウザのウィンドウの100％になるようになります。

navを私がフィドルに含めるulに変換することもお勧めします。

JSFIDDLE（コードを参照するためのURLの末尾に「ショー」を削除）

あなたが研究にする必要があります次のことは、モバイルデバイスへのよりよい適応するコンテンツを調整することmedia queriesです。モバイルデバイスの場合は、サイドバーを水平ナビゲーションに変更することを検討してください。で高さ&幅に100％を追加することにより

あなたは純粋なCSSのみのアプローチは、あなたがこのような何かを行うことができますしたい場合は、

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
}

あなたhtml/bodyあなたはその後、他の要素にheight: 100%を使用することができますページ全体を埋める

どのように動作するかは、JSFIDDLEを参照してください。

Helpful read about responsive web design

出典

2013-10-30 22:43:38

これは素晴らしく、助けになるジョシュのおかげで多くの感謝をしています。まだ試していませんが、後で私がどのように乗り出すかを見てください。あなたが提供したリンクのすばやいスキムは、私にとって非常に役立つように見えるので、それもありがとう。私は既に縦書きのタブレットサイズ以下で垂直方向のスクロールレイアウトに切り替えるためにブレークポイント付きのメディアクエリを使用する予定でしたが、この問題を解決する前に修正したいと思っていました。もう一度多くの感謝 – Dan

問題ありません！私はこのようなレイアウトを作ったことがないので、私たちが両方の人にとって有益なものだと思った。 'var wH = $（window）.height（）/ 4;'これは高さの1/2になります。これは高さの1/4になります。この回答が役立った場合は、正しい答えとしてマークすることを忘れないでください。あなたのデザインに最高の運があり、私に何か質問をしてください！ –

すごく感謝しています。答えがマークされています:) – Dan

ここではHTMLだけの単純化されたコードの例です：

<div id="welcome"> 
    your content on screen 1 
</div> 
<div id="projects"> 
    your content on screen 2 
</div>

、ここでは、VHを使用してCSSです：

div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
}

ここから：http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

それは動作します私のために。

出典

2014-09-19 19:43:40

これは最も簡単で簡単な答えです！ – emi

ページ高さはビューポートの100％ですか？

答えて

関連する問題