0

实时代码
我试图让我的 maincontent divclass="mc"只出现在屏幕底部的 10% 上。允许用户查看尽可能多的背景图像，同时仍然允许用户看到文章的标题。

我的解决方案是将 a 设置.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>

4

1 回答 1

1

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

margin-top: -10%;

或者

position: relative;
top: -10%;

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

于 2012-07-21T23:20:27.220 回答