-1

全幅および全高 (スクロールなし) である必要がある Web サイトをスライスする必要があります。その構造は非常に簡単です。ボディには 20px の境界線 (内側) があり、サイドバーとコンテンツが水平スライダーになります (下の画像を参照)。ここに画像の説明を入力

私の問題は、サイドバーの幅を設定するために私に何をお勧めしますか? コンテンツの幅を計算するためにサイドバーとjqueryに固定幅を使用することをお勧めしますか、それともサイドバーとコンテンツにパーセントで幅を使用することをお勧めしますか? より良い方法があれば教えてください。

注 : SCSS(CSS3) と HTML5 で開発しており、タルベットとも互換性があるはずです。

4

2 に答える 2

1

% widthサイドバーにを使用できますがmin-width、max-width値を指定することもできます。このようなもの。

デモのコード

関連するHTML：

<div class='sidebar'></div>
<div class='content-wrp'>
    <ul class='content'>
        <li class='slice'></li>
        <!-- and so on -->
    </ul>
</div>

関連するCSS：

html, body, .sidebar, .content-wrp, .content, .slice {
    box-sizing: border-box;
    margin: 0;
    height: 100%;
}
body { border: solid 20px lightblue; }
.sidebar {
    float: left;
    min-width: 10em; width: 20%; max-width: 32em;
}
.content-wrp {
    overflow-x: scroll; overflow-y: hidden;
    padding-bottom: 1em; 
}
.content { width: 4000px; }
于 2012-10-27T15:54:12.930 に答える
0

これはかなり一般的な問題です。1 つの列の幅を固定し、もう 1 つの列をレスポンシブにする必要があります。

この記事：

http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html

は、絶対配置に基づくソリューションと浮動小数点数に基づくソリューションの 2 つを提供します。

于 2012-10-27T15:33:59.213 に答える