第二個兄弟div元素沒有繼承高度

試圖改變#Leftbar的大小，但如果我用像素或百分比來做它不會改變，所以我試着改變父母大小，以便我可以使用百分比。出於某種原因，它適用於第一個div而不是爲兄弟第二個兄弟div元素沒有繼承高度

HTML

<!DOCTYPE html> 

<html lang="en"> 
<head class="Setup"> 
    <link rel="stylesheet" type="text/css" href="I don't want to reveal my path but it's accurate"> 
</head> 
<body class="Setup"> 
    <div class="Design"> 
     <div class="TopDesign"> 
      <p id="Topbar"></p> 
      <p id="Minibar"></p> 
     </div> 
     <div class="LeftDesign"> 
      <span id="Leftbar"></span> 
     </div> 
    </div> 
</body> 
</html>

CSS

* { 
    margin: inherit; 
    box-sizing: inherit; 
    top: inherit; 
    left: inherit; 
    font-family: Menlo; 
    font-style: italic; 
} 

html { 
    margin: 0px 0px 0px 0px; 
    box-sizing: content-box; 
    top: 0px; 
    left: 0px; 
} 

#Topbar { 
    background: rgb(255, 0, 0); 
    width: 100%; 
    height: 5em; 
    opacity: 0.6; 
} 

#Minibar { 
    position: fixed; 
    background: rgb(0, 0, 255); 
    width: 80%; 
    height: 2.5em; 
    top: 5em; 
    left: 5em; 
} 

#Leftbar { 
    background: hsl(0, 0%, 0%); 
    width: 5em; 
    height: 10em; 
}

來源

2016-04-27 Gensoki

你能表現出你真正想要發生一些暗示？圖像明智。粗糙的箱子圖紙應該沒問題......但是我沒有明白你想說的。 –

http://prntscr.com/axb19s，http://prntscr.com/axb1fi和http://prntscr.com/axb1ko – Gensoki

我仍然覺得我錯過了一些東西，但html元素是一個空框。它本身沒有高度，也沒有寬度。即使你定義了高度和寬度，它就像有一個沒有內容的紙板箱，還沒有被粘貼在一起。

您可以通過添加display: block來解決該問題。這將盒子粘在一起，可以讓你看到它的內容。

我不會談論你有ems的事實。這些讓我很困惑。

* { 
 
    margin: inherit; 
 
    box-sizing: inherit; 
 
    top: inherit; 
 
    left: inherit; 
 
    font-family: Menlo; 
 
    font-style: italic; 
 
} 
 

 
html { 
 
    margin: 0px 0px 0px 0px; 
 
    box-sizing: content-box; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
#Topbar { 
 
    background: rgb(255, 0, 0); 
 
    width: 100%; 
 
    height: 5em; 
 
    opacity: 0.6; 
 
} 
 

 
#Minibar { 
 
    position: fixed; 
 
    background: rgb(0, 0, 255); 
 
    width: 80%; 
 
    height: 2.5em; 
 
    top: 5em; 
 
    left: 5em; 
 
} 
 

 
#Leftbar { 
 
    background: hsl(0, 0%, 0%); 
 
    width: 5em; 
 
    height: 10em; 
 
    display: block; // ?? is this what you're trying to do?? 
 
}

<div class="Design"> 
 
     <div class="TopDesign"> 
 
      <p id="Topbar"></p> 
 
      <p id="Minibar"></p> 
 
     </div> 
 
     <div class="LeftDesign"> 
 
      <span id="Leftbar"></span> 
 
     </div> 
 
    </div>

來源

2016-04-27 01:32:58

是的，這就是我想要的。謝謝！ – Gensoki

這可能是因爲span S（如#Leftbar是）是內聯元素。您應該使用display:block|inline-block,float或position:absolute|fixed以便能夠設置width和height。

請記住，em單位與字體大小有關。

來源

2016-04-27 01:32:39 Gabriel

如果我理解你想要做什麼，問題是#Leftbar是一個跨度。 A <span>是內聯的。您可以：

1 - 使用<div>而不是跨度，這是一個塊類型。

2 - 使用CSS與自適應display，例如：

display: block;

或

display: inline-block;

希望它可以幫助

來源

2016-04-27 01:34:00

第二個兄弟div元素沒有繼承高度

回答

相關問題