スクロールなしの高さの列

私は現時点でこのサイトで作業しています: http://weloveprivacy.com/ 私が作ろうとしているところコンテンツ(#container)は、不要なスクロールを行わずに、上端(.top-wrap)からフッター(.footer)に収まるように伸びます。列(.front1、.front2、.front3)は常に同じ高さを持ち、画面を塗りつぶして、枠線が上から下に伸びるようにします。

これは純粋なCSSで可能ですか?

0
同じ質問を投稿したのは、前の質問をご覧ください。私の解決策もあなたのために働くはずです(実際に同じ質問と同じように見てください)。
追加された 著者 Ktash,
あなたは、同じ問題を抱えている人たちには、将来的に役立つように、ちょうど関連するコードをこの質問に追加してください。
追加された 著者 KatieK,

3 答え

まあ、楽しかったです。次のCSSを追加します。

.nav {
 left:0;
}
#wrapper {
 overflow:hidden;
}
#container {
 height:auto !important;
 min-height:100%;
 margin:0 auto;
 padding:0;
}
#container > div {
 margin-bottom:-10000px;
 padding-bottom:10000px;
}
.footer {
 margin-top:-97px;
 position:relative;
}

実際の動作を確認するには、 jsFiddleの例をご覧ください。

注意: margin-bottom /パディングボトムのハックはIEの古いバージョンを壊すでしょう。私は条件文を使って、そのスタイルを壊れたバージョンに提供し、単に列が伸びることなくそれを見られるようにすることをお勧めします。

2
追加された
ありがとうございました!それはCSSで行うことができる素晴らしいです! :)
追加された 著者 Cody,

#containerに次のcssプロパティを追加します。

float: left;
width: 100%;

.front1、.front2、.front 3に次のプロパティを追加します。

width: 33%;

幅を削除する:front1、front2、front3から318px。これで、列は画面の幅全体に伸び、各列の幅は同じになります(幅の33%を占めます)。

0
追加された
しかし、それはあなたが与えたサイトではすでにフルハイトです。トップラップからフッタへと完全に伸びています。正確に何を見ていますか?
追加された 著者 Ninja,
さてあなたはこれを行うことができます:ミニ高さを使用する:415px; front1、front2、およびfront3に表示されます。したがって、内部の内容に関係なく、列の高さが少なくとも415ピクセルになります。
追加された 著者 Ninja,
私はこれがあなたの質問だったことを願っています
追加された 著者 Ninja,
ありがとう、しかし、私が望むのは全幅ではなく、完全な高さです:)
追加された 著者 Cody,
あなたが小さい画面解像度を持っている必要があります、私は今、列から画像を削除したので、あなたはそれが伸びていないことが分かるはずです
追加された 著者 Cody,

あなたがやろうとしていることは、少なくともあなたが思っている方法では純粋なCSSでは不可能です。あなたができることは、偽の列などで偽装していることです。アイデアは、要素を含む3つの列をラップし、垂直にタイルする要素に背景イメージを適用することです。これにより、同じ高さの列の錯覚を作り出すことができます。

変更を加えるために画像を編集する必要があるので、維持するのは苦痛ですが、それは信頼できるものです。

0
追加された
さて、ありがとう!私は境界線を使用したいので、偽の列は機能しません。私はJavaスクリプトでそれを達成しようとする必要があります:)
追加された 著者 Cody,