3

現在、固定高さ (100px) のバナーを上部に配置して Web サイトを構築しようとしています。残りのコンテンツでページの残りの部分を埋めたいと考えています。バナーが div にあり、ページの残りの部分が別の div にあるようにしています。ページの残りの部分の高さを 100px (100% - 100px) 未満にします。高さに関しては、明らかに % と px を混在させることはできません。ただし、ウィンドウの高さ (100%) からバナーの高さ (100px) を引いた変数を定義し、これを使用して残りの div の高さを定義することは可能ですか?

私はcss、htmlに不慣れで、他の言語をほとんど知りません。私は単純な人なので、答えを単純にするようにしてください!

4

5 に答える 5

2

高さは動的であるため、「コンテンツ セクション」にコンテンツを追加すると、それを保持するコンテナのサイズも変化します。

簡単に言うと、「コンテンツ セクション」の高さを設定しないでください。

于 2012-09-27T20:26:15.813 に答える
0

height100％のhtmlと本文を作成します。バナーを絶対に配置します。バナーの下にコンテンツdivを追加し、min-height100％に設定します。このコンテンツはバナーの後ろにありますが、少なくとも100％になります。padding-topコンテンツがバナーの下に表示されないように、バナーの高さのdivをコンテンツに追加します。

HTML：

<div id="banner"></div>
<div id="content">
    <div id="main">
        Lorem Ipsum is simply dummy text..
    </div>
</div>​

CSS：

html, body { height: 100%; }
#banner { position: absolute; height: 100px; width: 100%; background: green; }
#content { min-height: 100%; background: yellow; }
#main { padding-top: 100px; }​

http://fiddle.jshell.net/pY6dc/

于 2012-09-27T20:34:19.493 に答える
0

window.innerHeight / document.documentElement.clientHeightプロパティを使用する

<div id="banner">banner</div>
<div id="content">content</div>

<script>
    if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
        document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px";
    } else {
        document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px";
    }
</script>
于 2012-09-27T20:35:24.893 に答える
0 
<div style="height: 100px">
   Your banner
</div>
<div>
  Body
</div>
于 2012-09-27T20:25:31.137 に答える
0

コンテンツ div の高さとして 100% を使用できます。バナーから画面の下部までのスペースを占めるように伸びます。

重要な部分は、html と body の高さを 100% に設定することです。

HTML

<html>
    <head>
        <title>Foo</title>
    </head>

    <body>
        <div id="banner"></div>
        <div id="content"></div>
    </body>
</html>

CSS

#banner {
    height: 100px;
    background-color: #ccc;
}

#content {
    height: 100%;
    background-color: #000;
}

body {
    height: 100%;
}

html {
    height: 100%;
}

ここでデモを参照してください: http://jsfiddle.net/yHFjh/

于 2012-09-27T20:29:35.170 に答える