0

下の写真を見てください。divの両側または少なくともdivの右側に境界線があります。境界線で実行したいのは、灰色のdiv全体を拡張することですが、境界線を付けheight:100%;てdivに配置すると、そのまま表示されます。以下の私のCSSも調べて、説明させてください。#Contentmin-heightを削除しheight:70%;て境界線をページ全体に拡張すると、すべてが含まれる大きな灰色のdivです。下の前と後の写真を見て、アイデアを得てください。

CSS：

#Content {
padding:0px;
min-height:70%;
}

前：

前

後： 後

かわった#Content { padding:0px; min-height:70%; }

に#Content { padding:0px; height:70%; }

誰かが私に、最小の高さのプロパティを使用して「状態後の画像」の境界線を取得する方法を説明してもらえますか。ここに混乱するjsFiddleがあります：リンク

4

1 に答える 1

2

私は少し推測していますが、おそらくあなたが望む効果は以下から生じるかもしれません：

#Files {
    border-left: 2px solid red;
    border-right: 2px solid red;
    min-height: 20em;
    padding: 0 10px;   
}

わかりやすくするために境界線を赤く広くしましたが、変更することもできます。

境界線を最後まで拡張するには<div id="Content">、次のスタイルを変更する必要があります。

#Content {
    width:100%;
    min-width:965px;
    min-height:50%;
    background-color:#FAFAFA;
    border-bottom:1px solid #E5E5E5;
    padding-top:50px;
    padding-bottom: 0px;
    font-weight:normal;
    color:rgba(0, 0, 0, .8);
}

下部のパディングをゼロに設定する必要があることに注意してください。スペースを強制して境界線を保持したい場合は、高さが固定された追加の要素を追加する必要があります。

<p style="height: 50px; margin: 0;"><!-- spacing hack --></p>

これは、レイアウトの残りの部分を変更せずにこれを行うための迅速で汚い方法です。

元のスタイルシートに注意してください。#Contentルールはいくつかの場所に表示されていると思います（元のフィドルCSSパネルの4行目と103行目）。

私のフィドルは：http：//jsfiddle.net/audetwebdesign/TuRUk/1/

お役に立てれば！

注：追加のパディングを追加しましたが、これはオプションです。私は境界線に座っているテキストが好きではありませんでした...

min-heightについて： 境界線を希望どおりに機能させるには、#Filesdivの高さを絶対的に測定する必要があります（autoや100％のような相対的な測定ではできません）。だから、私はmin-heightfor #Files（20emですが、これは調整できます）を指定し、小さなコンテンツ（数行）の場合、境界線は一番下まで行きます。テキストの大きなチャンクの場合でも、機能します。

他のdivをフロートさせた方法のため、#Filesdivには兄弟要素の高さを知る方法がありませんでした。できる最善の方法は、親から高さを継承することですが、この場合、他の要素は考慮されません。浮かんでいます。

于 2013-03-08T03:06:09.850 に答える