HTMLは画面サイズよりも大きく表示されます

Question

私はスキューバダイビングクラブのウェブサイトの新しいレイアウトについてHTML構造を完成させました。デザイナーがレイアウトを作って、それをhtmlでまとめました。

高さと幅に問題がある場合を除き、すべてがうまく適合します。私はそれをリファクタリングしましたが、それを解決する方法は見当たりません。上部のバナーと左の画像、ナビゲーションの幅は固定されています。コンテンツテキストdivは残りのスペースを占め、スクロールバーはdiv内にある必要があります。ページ全体ではなく、コンテンツのみをスクロールする必要があります。第一の問題は、幅と高さが非常に大きいことです。

スクロールバーが隠されていますが、ここでそれをテストすることができます。

.div-main-right-content { 
    width: 100%; 
    height: 100%; 
    float: right; 
    position: absolute; 
    word-break: normal; 
    background-color: white; 
    left: 220px; 

} 

とdiv要素を含むという事実：http://test.profunda.be/newlayoutr2.html とフィドル https://jsfiddle.net/u9buvpL0/3/

私はそれはとは何かを持っていると思います全幅と高さを有する。

Answer 1

まず、position：absoluteと一緒にfloat：rightを使用する意味がありません。

次に、正しいコンテンツ部門に100％を与え、コンテナの幅の100％を使用します。左の列はすでに幅の一部を取っていたので、もちろん外に出ています。
これを使用して、右の列をすべて自由な幅にすることができます。
divのメイン右内側を追加します。
使用このCSS：divのメイン・右コンテンツでさらに

.div-main-right 
{ 

    margin-left: 330px; 
} 

.main-right-inner { 
    float: right; 
    width: 100%; 
} 

float: right; position: absolute;

編フィドル削除：-右インナー.main追加のラッパーがないようにすることですhttps://jsfiddle.net/u9buvpL0/6/

を右側の列の内側に浮遊している要素をクリアする際に起こりうる問題。

Answer 2

私は問題がDIV-メインのdivに次の2つの列、固定幅と1パーセントのものを持っているということです

Answer 3

user this code 
.div-main-right-content 
{ 
    width: 60%; 
    height: 100%; 
    float: right; 
    position: absolute; 
    word-break: normal; 
    background-color: white; 
    left: 220px; 
} 

Answer 4

を適切に整列する

.div-main{width:59%} 

に使用し、あなたのコードを見て幅。これはあなたのレイアウトの幅を "変な"原因にします。固定幅のdivのサイズを変更すると簡単に修正できます。

本文にoverflow-y: scroll;という縦スクロールの問題があります：キャンセルしても機能します。

私はあなたのコードにあまりにも多くを見たposition:absolute ...危険です、慎重にそれを使用してください。より難しいがより有用な相対的な位置を使用する。