3

メインページのコンテンツ用とサイドバー用の 2 つの div があります。

どちらも幅がパーセンテージで設定されているため、ウィンドウのサイズが変更されても比率が維持されます。ただし、サイドバーには最小限の幅があります。これは、コンテンツが壊れて見えるようになる前にサイズを変更できるからです。ウィンドウのサイズが小さくなり、最小幅が開始されると、サイドバーがメイン ページのコンテンツを侵食し始めます。これは、メイン ページのコンテンツが、定義されているパーセンテージよりも小さいパーセンテージを占める必要があることを認識していないためです。サイドバー用。十分な幅がある場合は、メイン コンテンツとサイドバーがそれぞれの比率を維持できるようにしようとしていますが、サイドバー コンテンツが壊れて見え始めるポイントに到達すると、メイン コンテンツは幅を調整します。さらに補償します。

css/html でこれを行う方法はありますか、または新しい幅を計算し、スタイルシートの値を動的に調整する JavaScript を記述する必要がありますか?

これが私が持っているものの（簡略化された）例です：

HTML:

<div id="maincontent">
    <!-- Main page content here -->
</div>

<div id="sidebar">
    <!-- Sidebar content -->
</div>

CSS:

#maincontent
{
    width: 85%;
}

#sidebar
{
    width: 15%;
    min-width: 120px;
}

この例では、ブラウザ ウィンドウの幅が 800px を超えていれば、すべて問題ありません。しかし、800 ピクセルを下回ると、120 ピクセルがブラウザー幅の 15% を超えるという事実を補うために、メインコンテンツを 85% より小さくする必要があります。

4

2 に答える 2

6

あなたは試すことができます

@media all and ( max-size: 800px )  {
    #maincontent { width: 75%; }
}

もちろん、800px と 75% を画面サイズとパーセンテージに置き換えます

于 2012-08-02T15:29:00.970 に答える
1

これはあなたが探しているものですか？

CSS

#maincontent{
 background-color:orange;  
 }

 #sidebar
 {
 background-color:blue; 
 width:15%;
 min-width:120px;
 float:left;
 }

HTML

<div id="sidebar">
 I am the sidebar!
</div>

 <div id="maincontent">
 I am the main content!
 </div>

デモ：http：//jsfiddle.net/HFuCe/30/

于 2012-08-02T15:41:26.177 に答える