2番目の兄弟div要素が高さを継承していません

#Leftbarのサイズを変更しようとしましたが、ピクセルやパーセンテージで変更しないと、親サイズを変更してパーセンテージを使用するようにしました。何らかの理由で、2番目の兄弟div要素が高さを継承していません

* { 
    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を追加すると修正できます。これは、ボックスを一緒にテープし、その内容を見ることができます。

あなたにはemがあるという事実については何も話しません。それらは私をかなり混乱させます。

* { 
 
    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

それは（#Leftbarのように）インライン要素であり、おそらくspan秒だ最初の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のために働きます。 widthとheightを設定するには、display:block|inline-block,floatまたはposition:absolute|fixedを使用する必要があります。

em単位はフォントサイズに関連しています。

出典

2016-04-27 01:32:39 Gabriel

私はあなたが何をしようとして理解していれば、問題は#Leftbarスパンです。 <span>はインラインです。あなたは：

1 - ブロックタイプであるスパンの代わりに<div>を使用してください。

2 - 例えば適応displayと使用CSS、：

display: block;

または

display: inline-block;

はそれが

出典

2016-04-27 01:34:00

2番目の兄弟div要素が高さを継承していません

答えて

関連する問題