下にフッタがあるときにブラウザのサイズに基づいてdivコンテナのサイズを変更する

私は退屈な状態からウェブサイトを作っていて、ホームページ（最終的にはすべてのページにあります）にフッター、ちょうどstackoverflow上のものと同様に、ホームページにはヘッダー、上部にテキストセクション、メインパート、フッターがあります。ページのサイズを変更するとメインdivが拡大され、最小の高さは500pxになります。下にフッタがあるときにブラウザのサイズに基づいてdivコンテナのサイズを変更する

私がこれまで試してみましたコード：

.tutorials { 
    background: linear-gradient(180deg, rgb(240,230,220), rgb(200,190,180)); 
    min-height: 500px; 
    height: 66%; 
    left: 0; 
    right: 0; 
    margin-top: 0px; 
    border-top: 2px solid gray; 
    border-bottom: 2px solid gray; 
}

このコードは、メインのdivのサイズを変更していても、メインのdivは、どのブロックフッターのテキストを展開しながら、フッターのテキストが下に移動しません。また、ページを最小の高さよりも小さくしてからスクロールすると、メインのdivが500pxで、その下にフッターが表示されますが、divの上部をスクロールすると固定された場所に残り、空白の空白ができます上部のテキストとメインのdivの間。私が下にスクロールし続けると、フッターを表示する代わりに、上のこの隙間がさらに広がります。コード位置を追加する：固定では決して助けにならない。これを修正するには、HTML、CSS、またはjQueryのいずれかを使用することをお勧めしますが、必要に応じて他の言語にも対応しています。

出典

2016-07-15 Owen

あなたは助けが必要な場合は、私たちに多くのコードを共有する必要があります。 –

私たちの実験用にプランカまたはコードペーンを作成してください。適切な解決策を見つけるのがずっと簡単になります –

私はあなたの正確な状況に肯定的ではありませんが、私は助けることができると信じています。私はあなたの質問を解釈して、メインのdivを展開し、フッターがその下にとどまるようにすることを意味します。フッターの位置を相対（position: relative;）に設定し、次にclear: both;を使用して、その上にあるdivに乗っていないことを確認できます。ここでは、アクションでの例です：

#main{ 
 
    width: 70%; 
 
    height: 20vw; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: orange; 
 
    min-height: 150px; 
 
} 
 

 
#side{ 
 
    width: 30%; 
 
    height: 20vw; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: yellow; 
 
    min-height: 150px; 
 
} 
 

 
#footer{ 
 
    width: 100%; 
 
    clear: both; 
 
    text-align: center; 
 
    background-color: blue; 
 
}

<html> 
 
    <body> 
 
    <div id="main"><h1>Main</h1></div> 
 
    <div id="side"><h1>Side</h1></div> 
 
    <div id="footer"><h1>Footer</h1></div> 
 
    </body> 
 
</html>

出典

2016-10-08 20:59:02

下にフッタがあるときにブラウザのサイズに基づいてdivコンテナのサイズを変更する

答えて

関連する問題