高度溢出问题：100％;

Question

LIVE CODE
我正在尝试让我的maincontent div class="mc"出现在屏幕的底部10％。允许用户尽可能多地查看背景图像，并仍然允许用户查看文章的标题。

我的解决方案是将.mc设置为100％高度，并从视口大小的底部减去该高度。全部在css中完成

CSS

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

我的问题：当内容变大但100％高度时，它会陷入虚空。我尝试过最小高度;不幸的是，它使代码更糟糕。滚动到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>

    

Answer 1

您可以将文本容器放在图像下方，并使用负顶部边距或负顶部position: relative来定位内容：

margin-top: -10%;

或

position: relative;
top: -10%;

最后一种方法会在内容下方留出一个空白区域，以便重新定位。