0

ライブコードメインコンテンツのdivを画面の下部10％に表示
しようとしていclass="mc"ユーザーができるだけ多くの背景画像を表示できるようにし、それでもユーザーが記事のタイトルを表示できるようにします。

私の解決策は、.mc高さを100％に設定し、ビューポートサイズの下部からそれを差し引くことでした。すべてcssで行われます

CSS

.mc { 
    height:100%; 
    width:100%; 
    background:#fff; 
    z-index:1; 
    position:absolute; 
    bottom:-90%;
}

私の問題：コンテンツが100％の高さを超えると、ボイドに陥ります。min-heightを試しました。残念ながら、それはコードをさらに悪化させます。LIVE CODEの一番下までスクロールして 、問題を確認します

また

エラーが発生した画像（.box-shadow（）;で終了していることがわかります）

ここに画像の説明を入力してください

見た目は次のとおりです ここに簡単なモックアップがあります

HTML

<article class="mc">
<section class="cc">
    <div class="margin_wrapper">
        <header>
            <hgroup>
                <h1 class="at">rocking grass out styles for everyone.</h1>
                <h2 class="ast">The you mice structure for to of almost ability an trying the when designer
                    dissolute that constructing in quickly distinct...</h2>
            </hgroup>
        </header>
        <h3 class="title_header">the good</h3>
        <p>...</p>
        <h3 class="title_header">the bad</h3>
        <p>...</p>
        <h3 class="title_header">the ugly</h3>
        <p>...</p>
    </div>
</section>
<aside></aside>

4

1 に答える 1

1

画像の下にテキストコンテナを配置し、負の上部マージンまたは負の上部を使用しposition: relativeてコンテンツを配置できます。

margin-top: -10%;

また

position: relative;
top: -10%;

この最後の方法では、コンテンツの下に再配置のサイズの空白スペースが残ります。

于 2012-07-21T23:20:27.220 に答える