高度溢出问题:100%;

时间:2012-07-21 22:56:30

标签: html css

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();)

结束

enter image description here


以下是它的外观 heres a simple mock up

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>

    

1 个答案:

答案 0 :(得分:1)

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

margin-top: -10%;

position: relative;
top: -10%;

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