html - 高度为 :100%; 的溢出问题

Question

LIVE CODE
我试图让我的主要内容 div class="mc" 只出现在屏幕底部的 10%。允许用户查看尽可能多的背景图像，同时仍然允许用户看到文章的标题。

我的解决方案是将 .mc 设置为 100% 高度，然后从视口(viewport)大小的底部减去它。全部在 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%;

最后一个方法将在内容下方留出一个空白区域，使其达到重新定位的大小。