9

次のような div と css を含む html ドキュメントがあります。

<html>
<head>
    <title></title>
    <style text="text/javascript">
    body { padding:0px; margin:0px; }
    .full { background-color: yellowgreen; width: 100%; height: 100%; }
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; }
    .behindMenu { height: 50px; width: 100%; }
    .logo {width: 100%; height: 150px;}
    .content {background-color: yellow;}
    </style>
</head>
<body>
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</body>
</html>

Menu は固定です。 behindMenu は Menu と同じサイズで、menu の後ろにあります。次に、クラスがいっぱいのロゴとdivがあります。フルの後は、クラス コンテンツを含む div です。

そのページにアクセスすると、div full がブラウザのサイズのロゴと下部の間の (サイズ) になるようにします。そのため、ウィンドウのサイズを変更しても、ブラウザのサイズのロゴと下部の間に高さがなければなりません。下にスクロールすると、残りのコンテンツが表示されます。

このようなもの: http://strobedigital.com/

ここにフィドルがあります：http://jsfiddle.net/2963C/

4

5 に答える 5

33

最新のすべてのブラウザでサポートされている簡単なソリューションがあります。

div#full {
    height: 100vh;
}

唯一の注目すべき例外は、4.3 未満の Android です - ただし、システム ブラウザでのみです (Chrome は正常に動作します)。

ブラウザ サポート チャート: http://caniuse.com/viewport-units

于 2014-05-22T11:09:53.110 に答える
10

HTML

<html>
<head>
    <title></title>
    <style text="text/css">
    body { padding:0px; margin:0px; }
    .full { background-color: yellowgreen; width: 100%; height: 100%; }
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; }
    .behindMenu { height: 50px; width: 100%; }
    .logo {width: 100%; height: 150px;}
    .content {background-color: yellow;}
    </style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
<div class="content">The rest content</div>
</div>
</body>
</html>

CSS

html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; top:0; left:0; width:100%; height:100%;}
于 2013-08-07T07:33:34.170 に答える
2 
 .full { min-height: 100%; height:auto;}
于 2013-08-07T06:52:16.673 に答える
0 
<html>
<head>
    <style text="text/javascript">
    html,body{height:100%;}
.wrapper{min-height:100%; position:relative}
.full{position:absolute; left:0; width:100%; min-height:100%;}
.menu { height: 50px; width: 100%; background-color: black; position: fixed; }
.behindMenu { height: 50px; width: 100%; }
.logo {width: 100%; height: 150px;}
.content {background-color: yellow;}
    </style>
</head>
<body>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="behindMenu"></div>
<div class="logo">Logo</div>
<div class="full">Full div</div>
</div>
    <div class="content">The rest content</div>
</body>
</html>

ここに解決策があります - http://jsfiddle.net/agrawal_rupesh/b7gwK/

于 2013-08-07T08:08:48.190 に答える
0

残念ながらvh、vwiPhone では非常にバグがありますが、ほとんどすべてのブラウザー (はるか昔にさかのぼります) は喜んで計算してくれます。

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

.full {
  height: calc(100% - 50px); /* Minus menu height */
  min-height: calc(100% - 50px); / *for Mozilla */
}

html>body .full {
  height:auto;
}
于 2016-04-11T20:20:31.627 に答える