0

私のコンテンツを含む「maincontent」divがあります。画像を表示するためのJavaScript（Fancybox）がいくつかあります。div自体がスクロールしないように、divの高さを自動的に変更して、そこにあるものに合わせて変更しようとしていますが、Webページ全体はスクロールします。

修正したいページは次のとおりです: http://willryan.us/content/photo.html

min-heights、height:auto、overflow:auto などをいじってみましたが、結果はありません。Height:auto は、javascript 画像を完全に無視するように、テキストが div 内の唯一のものであると考えられるように機能します。

これが私のcssです。

div#content {
overflow:auto;
width:958px;
height: 800px;
position:absolute;
top:50px;
left:0px;
background-color:#C0CACE;

border:1px solid;
border-color:#616161;

-webkit-box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;

}

4

3 に答える 3

0

問題はフォトボックスのdivに関係しています。絶対位置をオフにすると、その高さまで機能し、高さをオフにして収まります。

必要のないときに絶対配置を使用しないと、この問題を回避できます。

相対位置を使用してページを再構築する必要があります。text-align:center;使用しているdivを親の中心に置くだけでよいことを考えると、それは非常に簡単なはずです。

于 2012-07-20T15:53:46.310 に答える
0

あなたの問題は、絶対配置を使用することにあります。通常のドキュメント フローに静的配置 (デフォルト) を使用すると、この問題は発生しません。

アップデート

相対配置も使用しません。

通常のドキュメント フロー (明示的に指定しない) はposition: static;絶対を使用します。絶対配置は基本的に、要素をドキュメントの通常のフローから取り出し、最も近い相対的に配置された親に基づいて配置します。

何をすべきか...ラッパーを「中央」に配置する必要がある場合。"wrapper" をpositon:relativewithに設定margin: 0px auto;し、すべての内部要素から絶対位置を削除します。ラッパー内の要素をインデントする必要がある場合は、パディング/マージンを使用してください。

于 2012-07-20T15:50:20.177 に答える
0

メインコンテンツの子には使用position: relativeしないことをお勧めしますposition:absolute。ここでは絶対は必要ありません。

  1. 高さを削除する#content(または min-height を使用する)
  2. 高さを削除する#photobox(または min-height を使用する)
  3. #contentオーバーフローを削除
  4. すべての#content子の位置を相対的に設定します (必要に応じて余白を使用します)

.

div#header {
   background-image:url(content/assets/elements/header.png);backround-repeat:none;
   width:960px;
   height:50px;
   z-index:2;
   -webkit-border-radius: 10px 10px 0px 0px;
   border-radius: 10px 10px 0px 0px;
   -webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
   box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
}

div#footer {
   background-image:url(content/assets/elements/footer.png);
   backround-repeat:none;
   width:960px;
   height:50px;
   z-index:2;
   -webkit-border-radius: 0px 0px 10px 10px;
   border-radius: 0px 0px 10px 10px;
   -webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
   box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
}

div#content {
   width:958px;
   background-color:#C0CACE;
   border:1px solid;
   border-color:#616161;
   -webkit-box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
   box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
   z-index:1;
   overflow: visible;
}

div#photobox {
   width: 769px;
   margin-left: 95.5px;
}
于 2012-07-20T15:55:15.530 に答える