クラスを持つ3つの親divがあります。これらは、ページの 3 つの部分 (ヘッダー、本文、フッター セクション) を分離します。ヘッダーは大丈夫です。本体には、定規のように線を引く必要があるdivがあります。
この行にループコードを挿入して描画しましたが、失敗したため、絶対位置を設定して、コンテンツがルーラー/ラインの高さも増加するようにしました。次に、何らかの理由でフッターに設定する必要がありますposition:relative;が、設定すると、フッター div がボディ div の上に表示されます。
どうすれば修正できますか？
本体と定規/線の高さは自動であり、本体の背景色を設定しても違いはありません。
コードサンプル:
html
<body>
<div class="header">it's own code and classes</div>
<div class="body">
<div class="line">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<div class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><h3><?php the_title(); ?></h3></a></div>
<div class="cont"><?php get_the_excerpt();?></div>
<?php the_post_thumbnail('45*45'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<div class="footer"><div class="ftr"></div></div>
</body>
そしてcss部分には次のものがあります：
.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
}
.line {
width:4px;
height:auto;
background:#000;
position:absolute;
right:640px;
padding-top:100px;
padding-bottom:30px;
}
.post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
}
.post:after {
content: "";
position: absolute;
top: 6%;
margin: -10px 0 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
border-left: 10px solid #999;
}
.title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
}
.cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
}
.footer {
width:999px;
height:200px;
margin:auto;
}
.ftr {
width:999px;
height:200px;
background:#000;
position:relative;
clear:both;
}
.ftr:after{
content:"";
position:absolute;
top:-9px;
right:500px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #06c;
}
編集済み：これが私が欲しかったものです
.body {
height:auto;
width:950px;
margin:0 auto 0 auto;
background:#098;
}
.line {
width:4px;
**height:100%;** //this fixed the problem
background:#000;
padding-top:100px;
padding-bottom:30px;
}
.post{
width: 460px;
height:170px;
background: #fff;
position: relative;
border-radius:10px;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
direction:ltr;
float:right;
margin-right:21px;
border-top-right-radius:0px 0px;
}
.post:after {
content: "";
position: absolute;
top: 6%;
margin: -10px 0 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
border-left: 10px solid #999;
}
.title {
width:90px;
height:15px;
margin-top:-13px;
margin-right:10px;
margin-left:10px;
}
.cont{
width:300px;
margin-top:15px;
float:right;
margin-right:13px;
}
.footer {
width:999px;
height:200px;
margin:auto;
}
.ftr {
width:999px;
height:200px;
background:#000;
position:relative;
clear:both;
}
.ftr:after{
content:"";
position:absolute;
top:-9px;
right:500px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #06c;
}
EDIT 2：まだ線を引くのに問題があります。height:100%ピクセルスケールで設定またはsthしたmin-height場合、またはコンテンツが増減してもコンテンツは動的であるため、行の高さは変更されません