爲什麼使用高度的保證金最高百分比以及如何解決該問題？

Question

我有一個CSS滑動下拉菜單，可以在顯示的元素數量上有所不同。

我使用overflow: hidden包裝和margin-top: -100%來隱藏菜單，並使用margin-top: 0進行CSS轉換以向下滑動動畫。

問題似乎是margin-top: -100%似乎正在拾取任何父元素的顯式width並忽略內容高度。

.outer { 
 
    overflow: hidden; 
 
    border: 10px solid red; 
 
    cursor: pointer; 
 
} 
 
.outer > .slide { 
 
    margin-top: -100%; 
 
    transition-property: margin-top; 
 
    transition-duration: 1s; 
 
} 
 
.outer:hover > .slide { 
 
    margin-top: 0; 
 
} 
 
.outer.bug { 
 
    width: 100px; 
 
}

<div class="outer"> 
 
    <div class="slide"> 
 
    <ul> 
 
     <li> 
 
     Ayy 
 
     </li> 
 
     <li> 
 
     Bee 
 
     </li> 
 
     <li> 
 
     See 
 
     </li> 
 
     <li> 
 
     Dee 
 
     </li> 
 
     <li> 
 
     Eee 
 
     </li> 
 
     <li> 
 
     Eff 
 
     </li> 
 
     <li> 
 
     Gee 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="outer bug"> 
 
    <div class="slide"> 
 
    <ul> 
 
     <li> 
 
     Ayy 
 
     </li> 
 
     <li> 
 
     Bee 
 
     </li> 
 
     <li> 
 
     See 
 
     </li> 
 
     <li> 
 
     Dee 
 
     </li> 
 
     <li> 
 
     Eee 
 
     </li> 
 
     <li> 
 
     Eff 
 
     </li> 
 
     <li> 
 
     Gee 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

運行該代碼段，你應該看到兩個紅色箱子，鼠標移到要麼趴下菜單中的幻燈片。

問題是第二個盒子 - 唯一的區別是父母有width: 100px;集合。

如果您檢查第二個框，您應該看到margin-top: -100%;已計算爲-100像素。

事實上，對父div的任何顯式或繼承寬度將成爲負邊距。

我發現它的唯一方法是明確設置margin-top與滑動菜單的高度相同，但涉及到DOM佈局和JS，我並不想爲每個菜單執行此操作。

這是一個瀏覽器如何處理margin-top負數百分比的錯誤？ IE11，Chrome和FX似乎都以同樣的方式對待它。

有沒有更好的解決方法，不需要明確的高度計算和額外的Javascript？

Answer 1

要移動一個元素（不管它的高度）與其自己的尺寸有關，可以使用transform:translate()而不是邊距。

因此，將元件向上移動自己的高度需要在Y軸上平移-100％。像這樣：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.outer { 
 
    /* overflow: hidden; */ 
 
    padding: 10px; 
 
    background: red; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
.outer > .slide { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: translateY(-100%); 
 
    transition-property: transform; 
 
    transition-duration: 1s; 
 
} 
 
.outer:hover > .slide { 
 
    transform: translateY(0%); 
 
}

<div class="outer"> 
 
    <div class="slide"> 
 
    <ul> 
 
     <li>Ayy</li> 
 
     <li>Bee</li> 
 
     <li>See</li> 
 
     <li>Dee</li> 
 
     <li>Eee</li> 
 
    </ul> 
 
    </div> 
 
</div>

然後我們可以使用絕對定位從文檔流取出孩子。

Answer 2

margin-top:-100%只有當我們刪除20px分配的.outer的邊界時纔有效，它被使用兩次10px + 10px。所以我們可以在這裏使用CSS calc（）函數來獲取我們的輸出。

ul有一個默認padding-top:40px所以這也是使用兩次40px + 40px，我們必須設置爲0px。

所以UL和邊界是不工作的margin-top:-100%;

缺省UL屬性的原因：

ul{ 
display: block; 
list-style-type: disc; 
margin-before: 1em; 
margin-after: 1em; 
margin-start: 0; 
margin-end: 0; 
padding-start: 40px; 
} 

.outer { 
 
    overflow: hidden; 
 
    border: 10px solid red; 
 
    cursor: pointer; 
 
    width:auto; 
 
    height:auto; 
 
} 
 
.outer > .slide { 
 
    margin-top: calc(-26px + (-100%)); 
 
    transition-property: margin-top; 
 
    transition-duration: 1s; 
 
    background:#ccc; 
 
} 
 
.outer > .slide > ul{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.outer:hover > .slide { 
 
    margin-top: 0; 
 
} 
 
.outer.bug { 
 
    width: 100px; 
 
}

<div class="outer"> 
 
    <div class="slide"> 
 
    <ul> 
 
     <li>Ayy</li> 
 
     <li>Bee</li> 
 
     <li>See</li> 
 
     <li>Dee</li> 
 
     <li>Eee</li> 
 
     <li>Eff</li> 
 
     <li>Gee</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="outer bug"> 
 
    <div class="slide"> 
 
    <ul> 
 
     <li>Ayy</li> 
 
     <li>Bee</li> 
 
     <li>See</li> 
 
     <li>Dee</li> 
 
     <li>Eee</li> 
 
     <li>Eff</li> 
 
     <li>Gee</li> 
 
    </ul> 
 
    </div> 
 
</div>