頂部屬性不能使用％，但可與px一起使用

我有一個div，我試圖按百分比進行定位，以便它保持原樣（這種浮動方式不是以頁面的空白部分爲中心），同時仍然可以在不同的屏幕尺寸下使用，並且看起來不錯，而且不會偏向一側。頂部屬性不能使用％，但可與px一起使用

問題是，儘管我可以使用left：x％來相應地調整它，但嘗試使用top不會執行任何操作，除非指定了像素而不是百分比。如果我試圖在的任何方法中改變底部，它會鎖定我想要放在靠近我的頭部的div上，並且使用px改變底部使其從頭部區域上移到屏幕上。

絕對定位content_wrapper實際上使得top屬性工作得很好，但它會在我的頁腳下方推出一堆空間並添加一個滾動條，幾乎破壞了頁腳之外的設計。

這裏的HTML：

<body> 

<div id="container"> 

<div id="content_wrapper"> 

    <div id="header"> 

    </div> 
    <div id="content"> 
     <div class="marquee"> 

     </div> 
    </div> 
</div> 
</div> 

<div id="footer_wrapper"> 
    <div id="footer"> 

    </div> 
</div> 

</body>

這裏是CSS：

html, body { 
    height: 100%; 
} 

#content { 
    height: 100%; 
    position: relative; 
    width: 100%; 
    float: left; 
} 

body { 
    margin: 0; 
    padding: 0; 
    color: #FFF; 
    /* background: image.jpg; */ 
    background-size: cover; 
} 

.marquee { 
    position: absolute; 
    height: auto; 
    padding: 10px 5px; 
    background-color: #F8F8F8; 
    width: 30em; 
    left: 15%; 
} 

#footer_wrapper { 
    width: 100%; 
    height: 43px; 
} 

#container { 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0px 0px -43px 0px; 

} 

#content_wrapper { 
    width: 100%; 
    margin: 0px 0px -41px 0px; 
    padding-top: 40px; 
    height: 100%; 
} 

#footer { 
    position: relative; 
    z-index: 10; 
    height: 4em; 
    margin-top: -4.07em; 
    background-color: #FFF; 
    clear: both; 
    background-color: #2A64A7; 
    border-top: 2px solid #F8F8F8; 
}

（書中有一個浮動或兩個，就像在＃內容，沒有必要的佈局，但這是試圖解決這個問題。）

在這個問題上的任何幫助將非常感激。對所有的代碼抱歉，但我覺得只是因爲前面提到的滾動問題，頁腳纔有必要。

來源

2013-07-16 Lapys

這是你說的div嗎？ #container作爲身高：100％;但100％的價值是什麼？我看到沒有給身體的高度（和實際的HTML） –

.marquee是我指的div。我應該只是將容器設置爲一個高度，然後用較小屏幕的媒體標籤指定另一個高度？ – Lapys

我猜如果你設置身高：100％的HTML和身體，它應該修復它。 html將佔用100％的窗口，body 100％的html，#container 100％的body和.marquee將會有一個有效的值來計算％from頂部內容#container –

取出

height: auto !important;

在#container的

。

可讓您使用％作爲頂部或底部。

來源

2015-01-28 21:02:03 carinlynchin

頂部屬性不能使用％，但可與px一起使用

回答

相關問題