3

私は、コンテンツ領域を除いて基本的にすべてが修正されている小さなサイトを持っています。そのコンテンツ領域をブラウザ ウィンドウの一番下まで拡大したいと考えています。サイトが 1024x768 の画面解像度で最初に読み込まれると、機能しているように見えますが、下にスクロールするとコピーは続きますが、色付きの背景は機能しません。解決策を探しましたが、これまでのところ運がありません。

サイトへのリンクは次のとおりです: www.atriaseniorliving.com/cah/our_process.html

編集：

私が使用しているcssは次のとおりです。

#copyContainer {
width: 1000px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
position: relative;

font-family: 'Droid Serif';
font-size: 16px;
line-height: 24px;

}

#mainCopy {
display: block;
width: 390px;
height: auto !important;
margin: 127px 0 0 0;
padding: 30px;
position:absolute;
bottom:0;
top:0;
left:505px;
right:0;
z-index:99;

-webkit-box-shadow:  0px 0px 10px 0px rgba(51, 51, 51, .6);
4

3 に答える 3

0

要素のパディングのサイズに影響します。

あなたのスタイルはおそらくこれ

display: inherit;
width: 390px;
height: auto;
margin: 127px 0 0 0;
padding: 30px 0px 0px 0px;
position: absolute;
top: 0;
left: 505px;
z-index: 99;
-webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
于 2012-11-19T20:10:18.307 に答える
0

私はあなたがheight:100%間違って使用していると思います...height:100%ブラウザウィンドウの高さを指しています。内部要素の高さが親よりも大きい場合はどうなると思いますか? それはあなたのケースです: #mainCopy はブラウザウィンドウよりも高さが大きいため、 #copyContainer よりも高さが大きくなります。いくつかのスタイルを更新するだけです:

#copyContainer {
   width: 1000px;
   margin: 0 auto;
   font-family: 'Droid Serif';
   font-size: 16px;
   line-height: 24px;
   height: 100%;
}
#mainCopy{
   display: block;
   width: 390px;
   margin: 127px 0 0 0;
   padding: 30px;
   float: right; //No need position:absolute
   bottom: 0;
   top: 0;
   left: 505px;
   right: 0;
   z-index: 99;
   -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
   box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, .6);
}
#middleContainer {
   width: 100%;
   background: #D9D9D9;
   position: absolute;
   top: 128px;
   z-index: -1; //Because the image was over the text
}

コードを改善するためにできるその他のこと:

  • ヘッダーに高さはありません。高さがない
  • 3つの異なるネストされたラッパーを使用しています
  • 十分に使用し、必要とせずposition:absoluteにposition:fixed
  • with:1000px使用する代わりにwith:960px
  • 絶対配置のdivでmargin-top:xxx代わりに使用していますtop:xxx
于 2012-11-19T22:02:06.827 に答える
0

#mainCopy から 'bottom: 0' を削除するだけです。#copyContainer である参照コンテナーの下部にのみ移動するように、要素は絶対に配置されます。

于 2012-11-19T22:17:57.447 に答える