高さをパーセンテージで使用しているdivの配置が正しくない

この問題が以前に投稿されているかどうかはわかりませんが、この質問を効果的に行う方法はわかりません。高さをパーセンテージで使用しているdivの配置が正しくない

私のウェブサイトでは、2つの大きなセクションを1つずつ順番に（タグを参照せずに）作成しました。高さは100％に設定され、もう一方は90％に設定されています。 2番目のセクションのすぐ下にdivを追加しました。 divを止め続けるために、私は2つのセクションの長さをシミュレートするために "top"を190％に設定しました。私は各セクションに最小の高さを設定しましたが、サイズ変更を停止したセクションの下にdivクロールが作成されます。

「position：absolute」を要素に使用している間、これを避けるにはどうすればよいですか？（1つのより大きな部分を使用して）

HTMLの例：

<html> 
    <body> 
     <div class="section1"></div> 
     <div class="box"></div> 
    </body> 
</html>

CSSの例：

.section1 { 
    display: inline-block; width: 100%; height: 100%; min-height: 500px; 
    position: absolute; 
} 
.box { 
    width: 100%; height: 200px; 
    position: absolute; top: 100%; margin-top: 50px; 
}

おかげで、

ジョナサン

出典

2016-10-26 Jonathan Fogelström

ちょうどposition:absoluteを使用しないでください。

JSを使用せずに、ビューポートの高さを100％必要とした理由があると仮定しています。 vhユニットを使用することもできますが、サポート/信頼性はありません。

最も簡単な方法は、単にheight:100%;にhtmlとbodyを設定することです：私はスタイリングの目的のために余分なCSSを追加しました

body, 
 
html { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.full { 
 
    height: 100%; 
 
    background: teal; 
 
} 
 
.shorter { 
 
    height: 90%; 
 
    background: #fbfbfb; 
 
} 
 
footer { 
 
    background: #222021; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
}

<section class="full"></section> 
 
<section class="shorter"></section> 
 
<footer>Made with love by a kitten</footer>

注意。

出典

2016-10-26 18:36:30

これは、感謝しました！：D –

@JonathanFogelströmnp、私が助けることができてうれしい：D –

高さをパーセンテージで使用しているdivの配置が正しくない

答えて

関連する問題