CSSページスクロールの問題

-6

まず、通常のウィンドウスクロールバーを非表示にしたいと思います。CSSページスクロールの問題

これらはLな変更です：

を黄色の部分の高さは、スクロールバーは、黄色、白と緑の両方の上にある必要があり、自動（ページの高さよりもすることができます）
する必要がありますLスクロール、Lは、黄色、白、緑の部分が一緒に移動する場合セクション
いつL（垂直または水平）ページのサイズを変更する上記のすべて依然として動作するはず

現在のHTML

<html> 

<body> 

<div id="wrapper"> 

<div class="topbar"> 
     RED SECTION 
</div> 

<div class="left side-menu"> 
     THE BLUE SECTION 
</div> 

<div class="content-page"> 
    YELLOW SECTION 
<footer> 
    THE GREEN SECTION 
</footer> 

</div> 

</div> 

</body> 

</html>

現在のCSS：lは、1000pxに緑を高さを変更する場合lは今

を持っています

html { 
    overflow-x: hidden; 
    position: relative; 
    min-height: 100%; 
} 

body { 
    overflow-x: hidden !important; 
} 

.topbar { 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 999; 
} 

body.fixed-left .side-menu.left { 
    bottom: 50px; 
    height: 100%; 
    margin-bottom: -70px; 
    margin-top: 0px; 
    padding-bottom: 146px; 
    position: fixed; 
    width:240px; 
    z-index: 2; 
} 
#wrapper { 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 

.content-page { 
    margin-left: 240px; 
    overflow: hidden; 
}

問題セクションが非表示になる

ブラウザのタブの高さが減少すると、ページの一部がとスクロールが隠されますがあなたがこの位置にいくつかのトリックを使用して取得することができ、それ

おかげ

出典

2017-04-27 Ernest Appiah

まず、ブラウザの動作をコードから変更することはできません。つまり、ブラウザに依存するスクロールバーを削除することはできません。他の問題のコードを投稿してください。 –

@Elie Nassifもちろん、彼は親に ''に 'overflow：hidden;'を追加することができます。 –

@ElieNassifはあなたに同意しません。オーバーフローで非表示にすることができます：非表示 –

は表示されません。上、左、右または下の位置で緑、青、赤のセクションに固定し、それらにZ-インデックスをオーバーレイします。

その後、重なり合った領域（青色のセクションが左から0、幅が100px、余白が100pxの場合）に合わせて、ページ全体にフィットするパッディングを配置することができます。赤と緑で同じです。その後、高さ100％の幅100％のoverflow-y：autoのコンテナを作成し、スクロールエリアに収まるようにコンテナを作成し、内容をこのコンテナに入れます。

html, body {overflow:none}で初期スクロールを無効にすることを忘れないでください。さらに詳しい情報が必要な場合は、私のPCにアクセスできないときに説明してください:)

出典

2017-04-27 13:04:53 Diego

CSSページスクロールの問題

答えて

関連する問題