1

content div でページの残りの部分を埋めたいと思います。しかし、それは持っているものを埋めるだけで、ページの残りを埋めません。基本的に、コンテンツの高さがビュー ポートの 20% の場合、div はビュー ポートの残りの部分を何も埋めません (不透明度 80% の白い背景)。ただし、コンテンツがビューポートの高さを超える場合は、コンテンツにラップする必要があります。次のコードがあります。

<body>
    <div id="page-wrapper">
        <div id="header-wrapper">
            <!--Fixed size header, 180px-->
        </div>
        <div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
            <div id="content-banner"> <!-- A scrolling image banner with photos -->
            </div>
            <div id="content"> <!-- The actual content of the page -->
                Some Mock content
            </div>
        </div>
    </div>
</body>​

そして、ここに私のCSSがあります:

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

body {
    background:black;
    margin:0px;
}

#page-wrapper {
    background:blue;
    display:block;
    margin-top:0px;
    width:900px;
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:100%;
    border:thin solid black;
}

#header-wrapper {
    background:green;
    display:block;
    margin-top:0px;
    width:900px;
    height:180px;
    border-bottom-left-radius:75px;
    box-shadow:0 0 10px #000;
}

#content-wrapper {
    background:white;
    display:inline-block;
    position:relative;
    top:25px;
    width:900px;
    border-top-right-radius:75px;
    overflow:scroll-y;
    box-shadow:0 0 10px #000;
    margin-bottom:-125px;
}

#content-banner {
    background:red;
    display:inline-block;
    position:relative;
    margin:10px 10px 0 10px;
    width:880px;
    height:160px;
    border-top-right-radius:65px;
    overflow:hidden;
}

#content-banner img {
    border-top-right-radius:65px;
    width:880px;
    height:160px;
}

#menu-wrapper {
    background:green;
    display:inline-block;
    position:relative;
    width: 200px;
    margin-left:10px;
}

#content {
    display:inline-block;
    position:relative;
    margin-top:10px;
    line-height:30px;
    vertical-align:top;
}​

また、すべての重複した人々があなたのリンクでここに来る前に;)私はすでにこれらすべての質問を読んで試しました:

ボディを埋めるために（原文のまま）divをストレッチ

CSS: 高さ - 残りの div を埋めますか?

BODY DIV で利用可能な領域を埋める

ブラウザのビューポートの残りの部分を div で埋める

誰かが私を助けてくれませんか。このため、javascript から離れたいと思います。

編集 1: 2012 年 9 月 27 日 08:35 猫

私が言いたいことを示すために、jsFiddle の例を追加しました。ここで表示できます: http://jsfiddle.net/vwKcs/2/また、不足しているコードをいくつか追加しました。申し訳ありません。

4

1 に答える 1

0

ヘッダーの高さがわかっている場合、これを実現する簡単な方法はありません。絶対位置を使用してください。コンテンツは高さの100％全体を占め、その中の最初の要素にはマージントップがあります。この空白で、ヘッダーを再び配置しますposition: absolute;

（エフェクトに必要なコードのみ）

#header-wrapper {
    position: absolute;
    height: 180px;
    width: 900px;
    top: 0;
    left: 0;
}

#content-wrapper {
    position: absolute;
    height: 100%;
    width: 900px;
    top: 0;
    left: 0;
}

#content-wrapper>*:first-child {
    margin-top: 180px;
}

しかし、ストーンに対して私は言わなければなりません：あなたの問題を解決するために必要なコードを投稿してください。レイアウトの問題を解決する必要がある場合、画像パスには興味がありません

于 2013-03-01T13:34:15.533 に答える