修改

<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;
}

Answer 1

当你将height属性设置为100％时，它假定其父元素的高度，即元素id“xwraper”也假设其父元素的高度，body标签默认为视口大小。（注意当您打开和关闭Chrome开发工具时高度如何调整！）显然，auto的值只是假设包裹内容所需的最小高度，如您所述。

额外滚动高度的原因是此元素id“wraper”中最后一个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上的高度属性更改为min-height 100％。这两件事结合在一起可以带来你想要的外观。总之，您最终应该：

#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;
}

Answer 2

尝试在内容的末尾添加此内容

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

Answer 3

如果您的包装器没有与窗口顶部对齐 - 即它有一个上边距或顶部边框 - 它仍将调整为窗口高度的100％，但会超过页面底部

但无论如何，发布更多代码将有助于我们提供一些背景信息！

Answer 4

我建议设置最小高度。我尝试在#xwrapper上使用900px，它看起来效果很好。

Div高度100％不够高或太高

修改

4 个答案: