Question

我目前正在为我的雇主开展一个项目，但我遇到了一个绝对定位元素的问题。我的page_logo div元素不会调整大小以垂直填充其包含的div outside_container。我在这里和互联网上看了一些似乎不起作用的东西（主要设置顶部，右侧，底部，左侧为0）。我想知道你是否能够查看CSS并向我提供一些反馈。只是一些快速亮点：我没有其他定位元素，只有一个浮动元素，但它在另一个div中。

html结构如下：

<html>

    <head></head>
    <body>
        <div id="header_container"></div>
        <div class="line_seperator"></div>
        <div id="header_text_container"></div>
        <div class="line_seperator"></div>
        <div id="outside_container">
            <!--

             <div id="top_container_inside"> 

            -->
            <div id="page_logo">
                <div class="tileList"></div>
                <!--

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

                -->
            </div>
            <div id="inside_banner">
                <div class="pageTitle">
                    <h1 class="pageTitleH1"></h1>
                    <div id="page_body_container"></div>
                    <div style="clear:both;"></div>
                </div>
            </div>
            <!--

             </div> 

            -->
        </div>
        <div id="footer_container_new"></div>
        <script type="text/javascript"></script>
    </body>

</html>

相关CSS

#outside_container {
    min-height: 100%;
    height:100%;
}

.tileList{
    position:relative;
    top:5%;
}

#page_logo{
    margin: 0px auto;
    padding-top: 20px;
    background-color: #09C;
    width: 30%;
    position: absolute;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
    filter: alpha(opacity=94);
    -moz-opacity:0.94;
    -khtml-opacity: 0.94;
    opacity: 0.94;
}

.pageTitle{
    background-color: #09C;
    width: 68%;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    float:right;
}

#inside_banner {
    width:99%;
    margin: 0 auto;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:15px;
}

Jfiddle：http://jsfiddle.net/CBevD/

Answer 1

我在这里看到两件事。一个是你没有在#page_logo指定一个高度。根据您当前的CSS示例，您应该将div调整为父元素#outside_container的宽度的30％，并且高度应保持宽高比。如果忽略这一点，或者忽略了高度，那么因为百分比值是相对于父容器的。如果#outside_container没有高度，则您无法在子#page_logo上使用百分比高度。同样，宽度也会有同样的问题。

高度问题与位置绝对元素

1 个答案: