Html 高度溢出问题：100%；

我正试图让我的maincontent div

class=“mc”

只显示在屏幕的底部10%。允许用户查看尽可能多的背景图像，并且仍然允许用户查看文章的标题

我的解决方案是将

.mc

设置为100%高度，然后从视口大小的底部减去该高度。所有都在css中完成

CSS

.mc{
身高：100%；
宽度：100%；
背景：#fff；
z指数：1；
位置：绝对位置；
底部：-90%；
}

我的问题是：当内容的高度超过100%时，它就会变成一片空白。我试了一下身高；不幸的是，它更糟糕地破坏了代码。滚动到的底部以查看问题

或

错误的图片（可以从.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>

为每个人推出摇摆草风格。
你鼠标的结构几乎是一个尝试设计师的能力
快拆中的风流。。。
好人

坏的

丑陋的

---

您可以将文本容器放在图像下方，并使用负上边距或负上边距以及

position:relative

来定位内容：

margin-top: -10%;

或

---

最后一种方法将根据重新定位的大小在内容下方留下空白。

为什么不使用一些边距或填充？这张图片是动态的吗？背景上的图片是通过编程更改的还是来自数据库？在任何情况下，你知道图像的高度，它不会改变吗？我只是想要一个全屏图像。。。高度将改变真正的问题是文本容器在100%后结束。。。我想将其设置为最小高度：100%，但这打破了布局。我想使用一个背景覆盖感觉w/o使用背景图像。因为它最终会被设置为wordpress的特色图片。Ugh洗了个澡，把它画出来，计算出duhh的边距。谢谢rcdmk

position: relative;
top: -10%;