0

ブラウザーの高さに合わせて相対的なサイズの div を作成する方法を探しています。問題は、どこから始めればよいのか、どのようにすればよいのか本当にわからないことです。

基本的には、50px の高さのヘッダーと、その下の相対 div があります。その div の下に、画面内で 50px の別の div があります (スクロールなし)。その div または別の div (どちらでも構いません) のコンテンツが画面の外に出ます。

したがって、ブラウザの高さが 1000px の場合、上下の div に 100px が費やされます。つまり、相対 div は 900px の高さでなければなりません。

アイデアをサポートするために、私が達成したいことの簡単なイメージを作成しました: (はい、ペイントスキル、私の現在の場所には Photoshop がありません)

デモ

オレンジ色の境界線は、ページ全体のサイズを表します。

これは JavaScript で行うのが非常に簡単であることはわかっていますが、それは私にとって難しいことではありませんが、可能であれば CSS のみの解決策を見つけようとしています。何か案は？

4

4 に答える 4

0

Ok！これは、私がたくさん使用した手法です。これは、相対的に配置された div の高さを修正しない場合に最適です。あなたの説明に基づいて、これは意図ではないので、うまくいくはずです。

基本的なマークアップ:

<body>

    <header>DIV 1 - 50PX</header>

    <div class="main">MAIN STUFF - RELATIVE</div>

    <footer>DIV 2 - 50PX</footer>

</body>

CSS:

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

body{
    margin:0;
    positino:relative;
}

header{
    position:absolute;
    width:100%;
    height:50px;
    top:0;
    left:0;
    background:#666666;
    color:#ffffff;
    z-index:10;
}

footer{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    left:0;
    background:#555555;
    color:#ffffff;
    z-index:10;
}

.main{
    position:relative;
    box-sizing:border-box;
    padding:50px 1em;
    height:150%; /* this is to simulate your dynamic content */
    background:#cccccc;
}

http://jsfiddle.net/xdeQ6/1/

メイン コンテンツ div にパディングを追加すると、ページの上部と下部にある実際のコンテンツがヘッダーとフッター div の後ろに隠れないようになります。

于 2013-10-17T15:39:43.987 に答える
0

ヘッダーとフッターに px の代わりに % を使用するアイデア:こちら

<div id='header'></div>
<div id='content'>
    <div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>

および CSS 本体 { height:100%; } #header { 幅:100%; 高さ:15%; 位置:絶対; 上:0; 背景:赤; マージン:0; }

#footer {
    width:100%;
    height:15%;
    position:absolute;
    bottom:0;
    background:blue;

}

#content {
    position:absolute;
    width:100%;
    top:15%;
    height : 70%;
    background:yellow;
    overflow-y:auto;
}
#content #scrollable {
     min-height:100%;
}
于 2013-10-17T15:32:03.533 に答える
0

だから私はこれがあなたが望むものだと思います

<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>

次にいくつかのCSS

#scrn {
 height: 1700px;
 width: 100%;
 position: relative;
 }
#top {
 height: 50px;
 width: 100%;
 position: fixed:
 top: 0px;
 }
#bottom{
 height: 50px;
 width: 100%;
 position: fixed;
 bottom: 0px;
 }

これは正しいと思いますか？また、 position: relative と height を入れました。これは、あなたが何を達成しようとしているのか 100% 確信が持てないためです。

于 2013-10-17T15:32:12.257 に答える