0

私はCSS3にかなり慣れていません。他の質問を読みましたが、それらが私のケースをカバーしているかどうかわからないので、しばらくお待ちください:)

このサンプルページがあります：

<html>
 <head>
  <style type="text/css">
   body { background-color: black; margin: 0; }
   #main { background-color: red; width: 60%; height: 100vh; margin: auto; }
   #header { background-color: white; width: 100%; height: 25%; max-height: 100px; }
   #article { background-color: orange; width: 100%; height: 55%; }
   #footer { background-color: blue; width: 100%; height: 20%; max-height: 80px; }
  </style>
 </head>
 <body>
  <div id="main">
   <div id="header"></div>
   <div id="article"></div>
   <div id="footer"></div>
  </div>
 </body>
</html>

実装する必要がある追加の必須の動作が 1 つと、オプションの動作が 1 つあります。

必須の

ご覧のとおり、ブラウザー ウィンドウがかなり高くなると、#header と #footer は適切に成長を停止し、その高さは背景の赤い #main div のままになります。私が必要とするのは、#article がこのスペースを取得することです。そのため、常に #footer をブラウザー画面の下の境界線に「プッシュ」します。

オプションの

レイアウト自体は無制限に水平方向にサイズ変更されますが、#article div は左右にフェードする背景画像を設定しています。より正確には、座標 (1,1) から (100,1) にフェードインし、(901,1) から (1000,1) にフェードアウトする 1000x1 の画像で、#article の高さをカバーするために垂直方向に繰り返されます。この画像が非フェード領域でのみ伸びる効果を得るにはどうすればよいですか (フェードした境界線が引き伸ばされないようにするため)。余分な div なしでそれを取得できますか (その場合、必須の動作はそれを水平方向に繰り返します)?

どうもありがとう ：）

4

3 に答える 3

0

フッターとヘッダーの高さを max-height と一緒に指定すると、操作が非常に難しくなります (または、少なくとも私がこれに使用する手法を使用します)。css を max-height 値である固定の高さに変更しました。高さのパーセンテージが画面サイズの互換性のためである場合は、メディア クエリを使用できます。

以下は、画像ではなくCSSのみを使用するグラデーションの背景画像とともに、レイアウトを実現する方法です。

body {
 background-color: black;
 margin: 0;


}
 #main {
     background-color: red;
     width: 60%;
     height: 100vh;
     margin: auto;
     position: relative;
 }
 #header {
     background-color: white;
     width: 100%;
     height: 100px;
 }
 #article {
     background-color: orange;
     width: 100%;
     top: 100px;
     bottom: 80px;
     position: absolute;
     background: rgb(179, 220, 237);
     /* Old browsers */
     background: -moz-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* FF3.6+ */
     background: -webkit-gradient(linear, left top, right top, color-stop(17%, rgba(179, 220, 237, 1)), color-stop(49%, rgba(41, 184, 229, 1)), color-stop(81%, rgba(188, 224, 238, 1)));
     /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* Opera 11.10+ */
     background: -ms-linear-gradient(left, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* IE10+ */
     background: linear-gradient(to right, rgba(179, 220, 237, 1) 17%, rgba(41, 184, 229, 1) 49%, rgba(188, 224, 238, 1) 81%);
     /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
     /* IE6-9 */
 }
 #footer {
     background-color: blue;
     width: 100%;
     height: 80px;
     position: absolute;
     bottom: 0;
 }

そして、それをテストするために作成したフィドル: Fiddle

于 2015-09-24T14:30:18.953 に答える
-1

ふと気になったのですが、以下の設定は試してみましたか？

html,body { height:100%; }
#main { height:100%; }
#article { height:100%; }

これにより、 #article がウィンドウと同じ高さになります。

于 2015-09-24T14:14:59.977 に答える