1

html div要素に絶対（px）と相対の両方の高さを使用する方法はありますか？ナビゲーションバーを作成し、残りをコンテンツdivで使用したいと思います。

jsfiddleを作成しました（.bot残りの高さを割り当てる必要があります）。この例では、望ましくないスクロールバーがあります。

編集：私がそれについて読むほど、これが本当の問題であるように思われることに気づきます。私は確かにマージンをすべてのネストされたレベルに持ち越すつもりはありません...

Edit2：私は、.bot2つの等しい高さのdivに分割できるソリューションを求めていました。つまり、ボットdivを一番上のdivでオーバーレイすることはできません。私は（を使用して）解決策を見つけましたcalcが、これまで聞いたことがなく、使用するために保存されているかどうかわかりません。

4

4 に答える 4

0

ブラウザの互換性の観点からこれがどれほど良い答えかはわかりませんが、これはChromeで機能しているようです。どうやら、calccssの結果を動的に更新する関数があります。誰かがこの解決策についてコメントできますか？

于 2013-02-15T07:05:29.147 に答える
0

これはきっとあなたを助けるでしょう...ie、ff、chromeでテスト済み

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

.top {
    height: 7%;
    min-height: 38px;
    max-height: 38px;
    background-color: green;
}

.bot {
    height: 93%;
    background-color: blue;
    position: relative;
}

.half {
    height: 50%;
    background-color: pink;
    position: relative;    
}

.half2 {
    height: 50%;
    background-color: yellow;
    position: relative;    
}
于 2013-02-15T07:02:13.193 に答える
0

-ve値を追加して出力を操作しmargin-top、空のdivを追加して高さを指定できます

HTML 

 <div class='top'>
        some top stuff...
    </div>

    <div class='bot'>
      <div class="space"></div>        
     some bot stuff...
    </div>

CSS

.space{height:40px}
.bot {
    margin-top:-40px;
    z-index:0;
    height: 100%;
    background-color: blue;
    position: relative;
}

デモ

于 2013-02-15T05:44:16.563 に答える
0

最初の質問:

.top {
 width: 100%;
 height: 40px;
 position: absolute;
}
.bot {
 height:100%;
 width:100%;
 margin-top:40px;
}

2 番目の質問については、固定で作成されていない限り、親要素に適用されます。

于 2013-02-15T06:47:48.440 に答える