0

だから私は固定ナビゲーションを備えた流動的なレイアウトを持っています。私が持っているのは、固定ナビゲーション自体と、固定ナビゲーションの下のスペースを完全に埋めようとしている他の4つのdivを含むdivです。navまたはdivのいずれかをスクロールしないと、これを実現できないようです。

navはposition：fixedに設定され
ますコンテンツdivを含むdivはposition：absolute height：100％width：100％
に設定されます4つのコンテンツdiv自体はfloat：left height：50％width：50％に設定されます

これがcssだけで処理できるかどうかさえわかりませんが、それが素晴らしい場合は、そうでない場合は、他の可能性を楽しませることができません。いつものように、どんな助けでも大歓迎です。

開発エリア： http： //riverhousegolf.icwebdev.com

4

2 に答える 2

1

CSSだけの解決策があるかもしれませんが、ここにjQueryの解決策があります。メニューの下のコンテンツは、スクロールバーなしで残りのスペースを埋めます。

HTMLマークアップは次のようになります。

<div id="menu">SOMETHING IN MENU</div>
<div class="content">
    <div class="part1"></div>
    <div class="part2"></div>
    <div class="part3"></div>
    <div class="part4"></div>
</div>

CSS：

body,html{padding:0; margin:0;height:100%;width:100%;}

#menu {
    position: fixed;
    top: 0;
    background: blue;
    height: 50px;
    width: 100%;
}

.part1 {
    width:50%;
    height: 50%;
    float: left;
    background: purple;
}
.part2 {
    width:50%;
    height: 50%;
    float: left;
    background: red;
}
.part3 {
    width:50%;
    height: 50%;
    float: left;
    background: green;
}
.part4 {
    width:50%;
    height: 50%;
    float: left;
    background: silver;
}

.content{
    width: 100%;
    position: relative;
}

jQuery：

var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;

$(".content").css("height", content_height);
$(".content").css("top", menu_height);

デモ

最も重要な部分はjQueryです。まず、ドキュメントの高さ（html）を取得し、次にメニューの高さを取得する必要があります。次に、ドキュメントの高さからメニューの高さを差し引くと、コンテンツの高さが得られます。重複を避けるために、同じ結果をコンテンツの一番上の位置に適用します。

于 2013-03-26T19:04:29.987 に答える
0

「overflow-y：scroll;」を削除します。スタイルシートの「html」セレクターの属性。

編集：純粋なCSSを使用する場合は、スクロールバーが必要になると思います。私は、少なくともナビゲーションが他のdivの上部を切断するのを防ぐ方法を示すためにフィドルを作成しました。私は使用しました

<div class="spaceTaker" >

それはページの残りの部分をぶつけます。

http://jsfiddle.net/Dtwigs/XRJ8n/

Edit2：すべての幅を同じにしてみてください。ただし、パーセンテージに設定されているすべての高さを削除します。html要素の高さは100％である必要がありますが、タイルなどはそうではありません。次に、このjqueryをページに配置します。

$( function () {
    var pHeight = $("html").height() - $("nav").height(); 
    $(".tile").height(pHeight / 2);    
});

また、ナビゲーションの位置を相対的にします。

http://jsfiddle.net/Dtwigs/XRJ8n/

于 2013-03-26T18:16:45.343 に答える