1

高さが固定されているが残りのページ スペースを使用するバナーの横に、高さが 100% の固定幅のサイドバーを配置しようとしています。以下のようにしてみましたが、バナーの幅がうまくいかないようです...

洞察を事前にありがとうございます！

S.

<div id="main">
    <div id="sidebar"></div>
    <div id="banner"></div>
</div>

html, body {
    height: 100%;
}

body {
    padding: 0; 
    margin: 0;
}

div#main {
    width:100%;
    min-height: 100%;
}

div#sidebar {
    float:left;
    position:absolute;
    min-height: 100%;
    width:195px;
    height:100%;
    background-color: rgba(0, 0, 0, 0.8);
}

div#banner {
    position:absolute;
    margin-left:195px;
    top:80%;
    width:100%;
    height:126px;
    background-color: rgba(179, 179, 179, 0.8);
}

スクリーンショットで更新

以下は、上記のコードで達成しようとしているものですが、バナーが残りのスペースよりも多くを占め、ページの外にはみ出し、横方向のスクロールが発生します。

ここに画像の説明を入力

4

5 に答える 5

1 
div#main {
    width:100%;
    min-height: 100%;
    position:relative;
    overflow:hidden;
}

トリックを行う必要があります。

于 2012-06-14T13:26:50.107 に答える
0

主な問題は、バナーの幅が 100%margin-leftであるのに 195 ピクセルであるということです。

これに対する解決策を見てください：http://jsfiddle.net/nW53u/

  • バナーdivのコンテンツを別のコンテンツでラップしてdiv、少しだけ与えることができますpadding-left
  • z-index絶対配置を使用しているため、サイドバーが上にあることを確認するために使用できます。

絶対配置では、レイアウトに合わせてブラウザーのサイズが変更されると、望ましくない動作が発生する場合があります。

別のアプローチを検討することもできます。また、他に何を配置するかによっても異なります。白い空間には何がありますか？

于 2012-06-14T13:17:39.103 に答える
0

バナーを 100% に設定しているため、何があってもページの幅に設定され、サイドバーが取っているスペースに気付かないと思います。

後でJavaScriptスクリプトを使用して、ページの残りのサイズを後で計算できます。または、 http://www.alistapart.com/articles/holygrailを見れば、CSS で行っていることと同様のものが作成されます。お役に立てれば。

于 2012-06-14T13:18:38.453 に答える
0

に 2 つのプロパティを追加

ul li a {
position:relative;
top:30px;
}

Working DEMO

于 2012-06-14T13:19:11.153 に答える
0

注: これは、別の理由で絶対配置が必要なく、これが 2 つの列だけである場合に機能します。

他の解決策があります：

  • 水平スクロールをなくしたいだけです。これはie5に戻ります

    body { オーバーフロー: -moz-scrollbars-vertical; オーバーフロー-x: 非表示; オーバーフロー-y: スクロール; }

以下の方法を使用すると、自動値を使用してブロック レベルの要素 (div) をコンテンツに合わせて縮小しますが、固定幅のサイドバー、バナー、およびさらに追加して拡張する可能性を維持します。これは、最も簡単な 2 列の CSS レイアウトの 1 つをわずかに変更したもので、ほとんどの人はバナーをコンテンツ領域全体の上部に広げます。

NESTED という用語を理解するための読み取り専用

次の場合、ネストされた div は div 内の div です。div2 はネストされた div です。

<div class="div1"><div class="div2></div></div>

CSS

/* for centered page or disregard margin settings*/
.container{height: auto; margin: 0 auto;)
/* then nested inside .container have the following two: */
.sidebar(width: 195px; float: left; height: 100%;)
.col{width:  auto; height: 100%;}
/* All of your other elements at this row-level in your document flow should be contained either within .sidebar or .col to start a new row research the CSS clearfix  - not to say you couldn't place as many things as you want in the body column and align them by default relative to its container(.col) but I am saying for more advanced layouts and for layouts that REQUIRE absolute positioniong. Also note the auto width. I left the sidebar width at auto as well. The div will shrinkwrap to its contents. . . as long as they're square */
.banner{vertical-align: top; width: auto; height: auto;)

div.container で始まる HTML マークアップ

<div class="container">
    <div class="sidebar">
    sidebar contents
    </div>

    <div class="col">
        <div class="banner">
            <img src="path/to/banner.jpg" alt="what you want mouse-over to say" />
        </div>
    </div>
</div>
<!--- Research the CSS clearfix if your document requires the use of floats for a new row a content or if you must use absolute positioning. Absolute positioning is the future and there is specification in CSS3 to bring in an interesting feature that would eliminate grid framework systems. I wish I could find the link but it is basically you assign place-holders to a template and css uses the selectors and place holders using absolute positioning to style the page. In all reality abs positioning is the "ideal" way to do things. It is just not the practical way for most sites atm, nor does it have much to offer for simple layouts. --->
<div class="clearfix"></div>

経験のある方から大切なことをお伝えします。浮かんでいるこれらすべてのグリッド システムに巻き込まれないでください。プリセットのタイポグラフィ セットなどのブート ストラップ機能を提供するという意味でクールなものもありますが、結局のところ (Java スクリプト グリッドを除く) それらは通常、継承された左マージン、コンテナー、およびコンテナーを持つ固定幅の列だけです。オブジェクトを移動して任意のグリッド列に揃えるための左余白クラス。これらは学習に適しているため、標準を使用する必要があると思いますが、巨大なビューポートを備えたデスクトップで誰かに大規模で派手なユーザー エクスペリエンスを提供したい場合は、メディア クエリを使用してください。一般的なルールは次のとおりです。要素がピクセル パーフェクトでない場合、要素は正しく表示されません。グリッドはこれを保証しますが、好みに合わせてカスタマイズします。デザインには三分割法などの魅力的なアスペクト比があるため、これは原則です。その他、見た目に美しい自然除数があるため、設計上の決定時にグリッドに実装することをお勧めします。

于 2012-06-14T14:58:31.707 に答える