2012-01-27 86 views
1

我以为我得到了这个问题,然后我遇到了一个我无法弄清的问题。Div高度为100%,要么不够高,要么太高

如果我将包装高度设置为auto,它会下降到内容的底部并停止,如果内容不像窗口那样高,则会看到它背后的背景。
如果我将包装设置为100%this发生。

当屏幕最大化时,页面高于窗口高度,并强制页面滚动不必要。 请参阅this

当窗口较小时,背景会在内容后面爬行。
我不知道什么页面滚动时,它不需要,当窗口收缩我想包装的背景仍然覆盖内容。 我该如何解决这个问题/我没有看到什么?
感谢

编辑:

<div id="xwraper"> 
<div id="wraper"> 

    <br class="cl cr" /> 
    <div id="imgholder"> 
     <div class="slider"> 
          <ul> 
           <li rel="1"> 
            <img src="id_tags_1.png" width="510" height="340" alt="&nbsp;" /> 
            <h4>&nbsp;</h4> 
           </li> 
           <li rel="2"> 

            <img src="id_tags_2.png" width="510" height="340" alt="&nbsp;" /> 
            <h4>&nbsp;</h4> 
           </li> 
           <li rel="3"> 
            <img src="id_tags_3.png" width="510" height="340" alt="&nbsp;" /> 
            <h4>&nbsp;</h4> 
           </li> 
           <li rel="4"> 
            <img src="id_tags_4.png" width="510" height="340" alt="&nbsp;" /> 

            <h4>&nbsp;</h4> 
           </li> 
          </ul> 
          <div class="clear controls"> 
           <img src="../../img/white-arrow-left.png" width="10" height="13" alt="&lt;" class="prev" /> 
           <span class="pages"> 
            <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide selected 1" /> 
            <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide 2" /> 
            <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide 3" /> 

            <img src="../../img/blank.gif" width="13" height="14" alt="&nbsp;" class="number hide 4" /> 
           </span> 
           <img src="../../img/white-arrow-right.png" width="10" height="13" alt="&gt;" class="next" /> 
          </div> 
         </div>  </div> 
    <div id="desc"> 
     <p>Identification Tags are a versatile, cost effective way to get your marketing message out. Used by travelers, sports teams, schools, health clubs, athletes and organizations, these tags are durable and each comes with it's own clear lanyard.</p> 
     <p>The back of each tag can be written on or we'll print another message on them for you. Choose one of our standard sizes, or we'll work with your custom size and shape. Please call Customer Service for pricing on custom shapes and sizes.</p> 

     <ul> 
      <li class="ulhead center">Product Specific Info.</li> 
      <li class="ulhead">Stock</li> 
      <li>Printed on durable .020&rdquo; thick plastic</li> 
      <li class="ulhead">Color</li> 
      <li>Neon and metallic colors are not available on Identifcation Tags</li> 

      <li class="ulhead">Production Time</li> 
      <li>Standard production time is approximately 10 days</li> 
      <li class="ulhead">General</li> 
      <li>Tags with no imprint are available, write or call for pricing</li> 
      <li><a href="../../contact_us.php">Contact us</a> for a quote on custom sizes or shapes</li> 

     </ul> 
    </div> 
    <br class="cl cr" /> 
    <table id="pb"> 
     <tr> 
      <td>&nbsp;</td> 
      <td> 
       <table> 
        <tr class="bold"> 

         <td>&nbsp;</td> <td>125</td> <td>250</td> <td>500</td> <td>1,000</td> <td>1,500</td> 
        </tr> 
       </table> 
      </td> 

     </tr> 
     <tr class="mt1"> 
      <td>4-Color Process</td> 
      <td> 
       <table> 
        <tr> 
         <td>Each</td> <td>2.24</td> <td>1.37</td> <td>.86</td> <td>.569</td> <td>.452</td> 
        </tr> 

       </table> 
      </td> 
     </tr> 
     <tr> 
      <td>Black Imprint</td> 
      <td> 
       <table> 
        <tr > 

         <td>Each</td> <td>.48</td> <td>.30</td> <td>.23</td> <td>.156</td> <td>.124</td> 
        </tr> 
       </table> 
      </td> 

     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>5A &nbsp;</td> 
     </tr> 
    </table> 
    <br class="cl cr" /> 
    <h3>ASI 85950 &bull; PPAI 265052 &bull; SAGE 56520<br />All content &copy; 2012 - Blue Frog Printing</h3> 

</div> 
</div> 

而对于包装的CSS:

#xwraper { 
position:absolute; 
left:50%; 
top:0px; 
width:1px; 
height:100%; 
overflow:visible; 
z-index:-3; 
} 

#wraper { 
position:absolute; 
left:-450px; 
top:0px; 
width:900px; 
height:100%; 
padding-top:110px; 
background-color:#FFFFFF; 
border-left: solid 5px #003860; 
border-right: solid 5px #003860; 
z-index:inherit; 
} 

您还可以,如果想看看www.bluefrogprinting.net/2012/id_tags/看看我在说什么

+0

完成编辑我的答案:P让我知道它是否适合你:) – lpd 2012-01-27 16:12:09

回答

2

当您将height属性设置为100%时,它假定它的父元素的高度,即元素ID“xwraper”也假定其父元素的高度,默认情况下为正视图大小。 (请注意,当您打开和关闭Chrome开发工具时,高度是如何调整的!)显然,如您所描述的,auto的值只是假定包装内容所需的最小高度。

额外滚动高度的原因是此元素ID“包装”中最后一个h3标签的底部边距。您需要调整下面的CSS规则,从这些问题而产生:

h3 { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:15px; 
    width:900px; 
    margin:40px 0px 60px 0px; /* INSERT ALARM BELLS */ 
    text-align:center; 
    float:left; 
} 

要解决的问题,你也应该改变xwraper和wraper你的身高属性的100%min-height。这两件事结合起来应该可以达到你想要的样子。总之,你应该结束于:

#wraper { 
    position: absolute; 
    left: -450px; 
    top: 0px; 
    width: 900px; 
    min-height: 100%; 
    padding-top: 110px; 
    background-color: white; 
    border-left: solid 5px #003860; 
    border-right: solid 5px #003860; 
    z-index: inherit; 
} 

#xwraper { 
    position: absolute; 
    left: 50%; 
    top: 0px; 
    width: 1px; 
    min-height: 100%; 
    overflow: visible; 
    z-index: -3; 
} 

#xwraper #wraper > h3 { 
    margin-bottom: 8px; 
} 
+0

这照顾了包装的背景不够长,但它仍然滚动时,它应该都适合在没有滚动的窗口中。它由于顶部填充而指向滚动,但我如何才能在需要时滚动?感谢您一直以来的帮助。我不知道最小高度是一件事。 – Scotosaurus 2012-01-27 19:26:56

+0

这可能是因为我在底部保留了一点余量,请尝试将最后一条规则更改为'#xwraper #wraper> h3 {margin-bottom:0;如果你愿意的话。请记住,多余的8像素会推动窗口滚动,而不是每一个分辨率都会以这种方式出现;例如我的1366x768笔记本电脑屏幕只显示了一个普通的2/3高度滚动条,在版权声明下有半行空格。 – lpd 2012-01-27 23:14:18

0

尝试在内容的末尾加上这个

<div style="clear:both"></div> 
0

如果你的包装没有对齐到窗口的顶部 - 即它有一个顶部边距或顶部填充 - 它仍然会调整到窗口高度的100%,但会推过底部这一页。

但无论哪种方式,张贴更多的代码将有助于给我们一些上下文!

+0

刚刚添加的代码... – Scotosaurus 2012-01-27 16:01:02

0

我建议设置一个最小高度。我尝试在#xwrapper上使用900px,它似乎工作得很好。