次のhtmlページを想定します。
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="leftcolumn"/>
<div id="content/>
<div id="footer"/>
</div>
</body>
</html>
私が達成しようとしているのは、leftcolumndivとcontentdivの高さが常に同じであるということです。コンテンツが少ないために左列のdivがコンテンツのdivよりも高い場合があり、その逆の場合もあります。コンテンツが多い場合、コンテンツのdivは左の列のdivよりも高くなります。
ボディの背景、左列の背景、コンテンツの背景がすべて異なる色であるため、現在の状況では、いくつかのレイアウトシェナニガンが生成されます。
これは私のCSSの現状です:
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: auto;
}
#content {
float: left;
color: #006350;
background: #DEE3DC;
height: 100%;
display: inline;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#leftcolumn {
color: white;
background: #006350;
height: 100%;
width: 170px;
float: left;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
height: 100%, height:inherit, height:auto,...
さまざまなdiv(ラッパー、左列、コンテンツ)のようにCSSスタイルを組み合わせて使用しようとしましたが、希望する結果が得られないようです。結論:左列とコンテンツdivの高さを同じにしたい場合は、その時点でどちらが高いかに関係なく、どのCSSスタイルを使用する必要がありますか。(そしてjavascriptを使用せずにお願いします)。
左の列が大きいJsFiddleの例:http://jsfiddle.net/CQPnF/4/
コンテンツが大きい例:http://jsfiddle.net/BQkme/