高度溢出问题：100％;

LIVE CODE
我试图让我的maincontent div class="mc"刚刚出现在屏幕的底部10％。允许用户尽可能多地查看背景图片，并且仍然允许用户看到文章的标题。高度溢出问题：100％;

我的解决方案是将.mc设置为100％高度，并从视口大小的底部减去该高度。所有的CSS

CSS做

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

我的问题：当内容变为更大然后100％的高度使它归入无效。我尝试了最小高度;不幸的是它破坏了代码甚至更糟糕。滚动到LIVE CODE底部，看问题

或

ERROR'd图片（你可以告诉它从.box的阴影（）结束;）

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>

来源

2012-07-21 Matthew Harwood

为什么不使用一些边距或填充？这个图像是动态的吗？ – rcdmk 2012-07-21 23:03:34

你是什么意思？ – 2012-07-21 23:04:42

背景上的此图像是否以编程方式更改或来自数据库？无论如何，你知道图像的高度，它不会改变吗？ – rcdmk 2012-07-21 23:07:45

你可以把文字容器beloow的形象和使用负上边距或负顶部position: relative的内容定位：

margin-top: -10%;

或

position: relative; 
top: -10%;

这最后一种方法将离开内容下方的空白处调运的大小。

来源

2012-07-21 23:20:27 rcdmk

呃洗个澡，把它拉出来，想通了。谢谢rcdmk – 2012-07-21 23:23:25

不客气。尽量不要过热头部。 ;） – rcdmk 2012-07-21 23:25:58

高度溢出问题：100％;

回答

相关问题