オーバーフロー：このプログラムでは、正確に何が行われますか？

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.header { 
 
    background-color: #2196F3; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 15px; 
 
} 
 
.footer { 
 
    background-color: #444; 
 
    color: white; 
 
    padding: 15px; 
 
} 
 
.topmenu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #777; 
 
} 
 
.topmenu li { 
 
    float: left; 
 
} 
 
.topmenu li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 
.topmenu li a:hover { 
 
    background-color: #222; 
 
} 
 
.topmenu li a.active { 
 
    color: white; 
 
    background-color: #4CAF50; 
 
} 
 
.column { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
.clearfix::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
.sidemenu { 
 
    width: 25%; 
 
} 
 
.content { 
 
    width: 75%; 
 
} 
 
.sidemenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.sidemenu li a { 
 
    margin-bottom: 4px; 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: #eee; 
 
    text-decoration: none; 
 
    color: #666; 
 
} 
 
.sidemenu li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
.sidemenu li a.active { 
 
    background-color: #008CBA; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<ul class="topmenu"> 
 
    <li><a href="#home" class="active">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
<div class="clearfix"> 
 
    <div class="column sidemenu"> 
 
    <ul> 
 
     <li><a href="#flight">The Flight</a></li> 
 
     <li><a href="#city" class="active">The City</a></li> 
 
     <li><a href="#island">The Island</a></li> 
 
     <li><a href="#food">The Food</a></li> 
 
     <li><a href="#people">The People</a></li> 
 
     <li><a href="#history">The History</a></li> 
 
     <li><a href="#oceans">The Oceans</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="column content"> 
 
    <div class="header"> 
 
     <h1>The City</h1> 
 
    </div> 
 
    <h1>Chania</h1> 
 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
    <p>You will learn more about responsive web pages in a later chapter.</p> 
 
    </div> 
 
</div> 
 

 
<div class="footer"> 
 
    <p>Footer Text</p> 
 
</div> 
 

 
</body> 
 
</html>

私はオーバーフローせずにこのプログラムをコンパイル：隠さここでは必要です：隠された、それは同じ出力を与えていませんでしたオーバーフローは、なぜ、私は理解できないのですか？私はオーバーフローを使用した：それはそれはボックスがデータのために小さすぎることではないことを知っているので、自動とそれはスクロールを表示doesnt。トップメニューにあります。私はCSSの初心者ですが、どうしてなぜいくつかの要素に対して2つのクラスがあるのですが、なぜボックスサイズを使用するのですか？の質問には、それはdownvotingそれは私に質問をするのを禁じているので - 私を無力にレンダリングします。

出典

2017-10-12 Therebelentropy

私は経験豊富なCSSユーザーですが、これは私が探し出すにはしばらく時間がかかりました。 .topbar要素は、高さが定義されていないulであるため、子要素を参照して高さを決定します。ただし、内部の要素がfloatを使用しているため、親のサイズは変更されません。

this previous answerについては、overflow: noneがこの問題を解決するためのハックです。しかし、私はこれがあなたの場合の最善のアプローチだとは思わない。私はどちらかになります。

はあなたtopbar
使用flexbox代わりul

出典

2017-10-13 00:02:24

子要素は何のために一定の高さを定義しますか？ – Therebelentropy

@Therebelentropy https://www.w3schools.com/xml/xml_tree.asp –

ありがとう、しかし、あなたはオーバーフローの使用について詳しく述べることができます：隠されています。 – Therebelentropy

オーバーフロー：このプログラムでは、正確に何が行われますか？

答えて

関連する問題