0

HTML に CSS を含む次の div があります。ページの下部に div を修正しました。ブラウザーのサイズが小さくなったときに HTML コンテンツが応答し、再配置されるように設計しました。

<div id="button-section">
 <!-- Section for function buttons -->
  <div id="function-buttons">
     <div class="fn-button">
     <!-- Function button -->
       <span>My Current Checks</span>
     </div>
  </div>
</div>



#button-section{
width: 100%;
height: 150px;
position: fixed;
bottom: 0;
background-color: rgb(229, 229, 255);
min-width:1000px;
}

#function-buttons{
width: 70%;
height: 100%;
float:left;
min-width: 870px;
}

ブラウザのサイズを縮小すると、流動的なコンテンツを表示する水平スクロール バーのみが生成されます。ということで固定コンテンツがブラウザに半分表示されています！次の画像にシナリオを表示しました。ブラウザーに固定コンテンツを受け入れさせ、スクロール バーで正確な量を表示するにはどうすればよいですか。

相対モードにしてみましたが、うまくいきません！

スクロールせずに

ここに画像の説明を入力

4

2 に答える 2

1

問題が何であるかを完全に理解しているかどうかはわかりません — おそらくスクロールバーが問題なのでしょうか? その場合は、最小幅の値を 1000 ピクセルより大幅に小さくすることをお勧めします。min-width を設定することで、このセクションが x 以上であることを宣言します。この場合、x = 1000px です。そのため、スクロールバーを取得しています。

手始めに、その最小幅の値を削除する必要があります。それを超えて、ブラウザの幅を決定するためのオプションを評価する必要があります。おそらく、次の行に沿って jQuery を使用します。

<script type="text/javascript">
$(document).ready(function(e) {
    var windowWidth = $(document).width();
    $('#button-section').css('min-width', windowWidth+'px');
});
</script>
于 2013-04-11T04:27:00.277 に答える
1

まず、位置「固定」または「絶対」はスクロールでは機能しません。固定または絶対にすると、子は親の相対性に制限されなくなり、固定位置のために親フローから削除されます。スクロールしたい場合は、親に対して position:relative を作成します。

よろしく、ラヴィ

于 2013-04-11T04:39:11.890 に答える