HTMLの2パネルレイアウトのコンテナの高さ

2パネルレイアウトの外側コンテナは垂直に伸びません。HTMLの2パネルレイアウトのコンテナの高さ

IDコンテナに<DIV>は、二つのパネルの2つのdivを囲むさ：

<DIV>サイドバーは、サイドバーが長いコンテンツよりも外側にある場合にパネル
<DIV>コンテンツが

右のパネルであり、残され容器は伸びない。

<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title> 
<meta charset="utf-8"> 
<style> 
#container { 
    width: 600px; 
    border: 1px solid blue; 
} 

#content { 
    border: 2px dashed red; 
    margin-left: 220px; 
    margin-right: 10px; 
} 

#sidebar { 
    float: left; 
    border: 2px dashed green; 
    width: 200px; 
    margin-right: 10px; 
    margin-left: 10px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="sidebar"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. 
    Cras vel lorem. Etiam pellentesque aliquet tellus. 
    </div> 
    <div id="content"> 
    Article with some content. Article with some content. Article with some content. 
    </div> 
</div> 
</body> 
</html>

so-example-html-two-panel-outer-container-not-stretched

出典

2016-04-24 jaquar c

コンテナのoverflow CSS属性を使用します。それは自動的にその高さを調整します。 Documentation on overflow。

下記のコードを使用してください。インラインブロックであることの両方divを設定

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Example</title> 
 
<meta charset="utf-8"> 
 
<style> 
 
    
 
#content { 
 
    border: 2px dashed red; 
 
    margin-left: 220px; 
 
    margin-right: 10px; 
 
} 
 

 
#sidebar { 
 
    float: left; 
 
    border: 2px dashed green; 
 
    width: 200px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
} 
 
#container { 
 
    width: 600px; 
 
    overflow: hidden; 
 
    border: 1px solid blue; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<div id="container"> 
 
    <div id="sidebar"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. 
 
    Cras vel lorem. Etiam pellentesque aliquet tellus. 
 
    </div> 
 
    <div id="content"> 
 
    Article with some content. Article with some content. Article with some content. 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

出典

2016-04-24 10:18:44

。フロートの必要はありません：左のdivには左、右のdivには余白が残ります。

#content { 
border: 2px dashed red; 
margin-right: 10px; 
display: inline-block; 
width: 350px; 
vertical-align:top; 
} 

#sidebar { 
border: 2px dashed green; 
width: 200px; 
margin-right: 10px; 
margin-left: 10px; 
display: inline-block; 
}

here is a fiddle

出典

2016-04-24 10:24:00 AnatPort

HTMLの2パネルレイアウトのコンテナの高さ

答えて

関連する問題