高度溢出問題：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％;

回答

相關問題