高度問題與位置絕對元素

-1

我目前正在爲我的僱主項目工作，但我有我的絕對定位元素之一的問題。我的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/

來源

2014-06-10 NSaid

**「我的某個絕對定位元素存在問題。」** - 也許您可以實際指定**問題**的含義？ –

或至少提供一個輕鬆的小提琴。 –

鏈接到實際的網站，特別是當仍然在開發和內容可以改變（你顯然是在這裏調試）是不鼓勵的。轉到jsfiddle.net並在那裏發佈代碼示例，以便保留錯誤，因爲人們使用此站點作爲參考，並可能在問題消失後查看帖子。我發佈了一般的答案，通常是原因，但如果你創建了一個小提琴，我可以詳細闡述一下。 – MaKR

我在這裏看到兩件事情。一個是你沒有在#page_logo上指定高度。根據您當前的CSS示例，您應該將div調整爲父元素的寬度的30％，並且高度應保持高寬比。如果這被忽略，或者如果你有一個高度被忽略，這是因爲百分比值是相對於父容器。如果#outside_container沒有身高，那麼您不能在子女#page_logo上使用百分比身高。同樣，寬度也會有同樣的問題。

來源

2014-06-10 17:20:41 MaKR

高度問題與位置絕對元素

回答

相關問題